者：悅然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，就介紹到這里。希望對你有幫助！感興趣的同學可以去了解下哈~