者：悦然wordpress建站(悦然建站）

继续分享wordpress建站教程。今天给大家分享一下为图片添加CSS样式的方法。

相信现在很多使用wordpress建站的用户都已经习惯了使用古腾堡编辑器，但是不知道大家注意到没有，古腾堡编辑器的图像区块只提供的默认、圆角、尺寸大小等设置，没有办法给图片添加一些更显眼的效果。

下面悦然网络工作室就给大家分享一下给古腾堡图像区块添加CSS样式的方法，可以让你的内容更加出彩。

方法一：直接全局添加CSS样式

/* 添加阴影和边框 */
.wp-block-image img {
box-shadow: 15px 15px 0px #d6d6d6;
border: 1px solid #d6d6d6;
}

把上面的CSS样式代码添加到网站的CSS文件中即可。如果你使用的主题的提供CSS设置选项，那么添加会更方便，进入外观-自定义-额外CSS，把上面的代码添加进去就可以了。

方法二：为不同的图片添加不同的CSS样式

我们同样可以使用上面的方法来实现，只不过需要先在主题模板的CSS表中预设好样式，然后在图像区块的高级-额外的CSS类中添加对应的CSS类即可。不过这样相对麻烦一下，这里我们介绍使用插件的方法来实现。

其实悦然网络工作室之前的文章就已经给大家分享过类似的方法的，使用的插件名为blocks-css

blocks-css插件下载地址

https://downloads.wordpress.org/plugin/blocks-css.zip

?插件安装好后可以直接在古腾堡编辑器页面给对应的图片添加不同的CSS样式效果，如上图所示。

box-shadow: 15px 15px 0px #d3dce5;

阴影效果

box-shadow: 8px 8px 14px rgba(100, 100, 100, 0.5);

半透明阴影

border: 1px solid #445e79;
border-radius: 10px;

实心边框

border-top: 10px solid #445e79;
border-bottom: 10px solid #445e79;

上下边框

以上CSS效果大家可以随意修改里面的数值。

关于blocks-css插件的具体使用方法大家可以查看下面这篇文章。

给WP古腾堡区块添加CSS效果【https://www.zsxxfx.com/5546.html】

大家推荐一款超好用的PS证件照大师插件，Document Star证件照大师 for Mac主要的用来处理证件照，这款证件照大师插件提供了证件照尺寸裁剪、排版、滤镜磨皮、更换底色、服装模板等实用的功能，另外证件照大师ps插件还支持批量处理，这款证件照大师PS插件适用于最新版本的Photoshop 2019。

Document Star证件照大师插件介绍

证件照大师是一款简单易用的证件照处理插件（Photoshop插件）。利用PS证件照大师可以快速处理多种证件照片尺寸排版、裁剪以及更换背景等操作。PS证件照大师理论上支持PS CC全系列软件（win/mac），亲测PS 2019可用。

证件照大师PS插件功能

- 选择相册中的图片进行证件照制作

- 现场拍摄一张图片进行证件照制作

- 从图片中抠出证件照主体，可进行放大缩小、擦除选中的操作

- 按比例生成电子证件照到您的本地相册

天给小伙伴们分享一个超棒的Vue图片任意裁剪插件VueImgCutter。

vue-img-cutter 基于 vue2.x 构建的轻量级剪切图片组件。支持移动图像、放大缩小图片、任意移动图片、固定比例/尺寸、远程图片裁剪等功能。

功能特色

• 兼容IE9+，MSEdge，Chrome，Firefox
• 两种展现形式，行内或弹窗
• 可旋转、缩放图片
• 任意比例、大小裁剪
• 固定比例、大小裁剪
• 支持远程图片裁剪、跨域设置

安装

$ npm i vue-img-cutter -S

使用插件

<template>
  <div id="app">
    <ImgCutter
      label="选择图片"
      :isModal="false"
      :boxWidth="800"
      :boxHeight="500"
      :cutWidth="300"
      :cutHeight="300"
      :sizeChange="true"
      :moveAble="true"
      WatermarkText="水印文字"
      v-on:cutDown="cutDown"
    >
      <div class="btn btn-primary" slot="open">选择本地图片</div>
    </ImgCutter>
  </div>
</template>
<script>
import ImgCutter from 'vue-img-cutter'
export default {
  components: { ImgCutter },
  data() {
    return {}
  },
  methods: {
    cutDown(res) {
      let imgSrc=res.dataURL;
      console.log(imgSrc);//输出为base64数据
    }
  }
}
</script>

设置模态弹框模式

<ImgCutter :isModal="true"></ImgCutter>

参数配置

插槽Slot

<ImgCutter v-on:cutDown="cutDown">
  <button slot="open">选择图片</button>
</ImgCutter>

返回值

最后附上示例及项目地址

# 演示地址
https://ihtmlcss.com/demo/dist/#/croptool
# 仓库地址
https://github.com/acccccccb/vue-img-cutter

ok，就介绍到这里。希望对你有帮助！感兴趣的同学可以去了解下哈~