Chrome瀏覽器下使用半透明背景圖

很簡單！！！

首先，下載chrome瀏覽器插件"stylish";

看到chrome右上角那三個點沒有！點開-擴展程序-將下載好的插件拉進瀏覽器的擴展程序界面-並啟用該插件 然後就可以進行編輯啦!!!

啟用後 你將會發現右上角多了個圖標，點擊圖標選擇管理已安裝樣式(已有樣式就選擇修改)

在編輯區內使用下面這一串代碼

body::before{

content :" " !important;

position:fixed !important;

top:0 !important;

left:0 !important;

right:0 !important;

bottom:0 !important;

background:url("http://localhost:8080/%E5%88%9D%E9%9F%B3%E 6%89%8B%E9%A3%8E%E7%90%B4/image/%E5%A3%81%E7%BA%B81.jpg") no-repeat!important;//該地址是不可用的，需要自行查找自己喜歡圖片的地址!

background-size:cover !important;

background-position:center !important;

z-index:-1 !important;

opacity:0.3;//這裡是透明度，1為原圖，0為全透明!

}

最後保存！

保存後可以到其他網站去，啟用該插件並刷新網頁即可。重啟瀏覽器不會影響該插件的使用。

要注意啦!!! background:url("這裡填圖片的絕對路徑(線上的)，不能是本地圖片喔")//小貼士:如果想要用本地圖片，可以嘗試配置tomcat等本地伺服器，將圖片放進伺服器里的項目內，然後便可以通過訪問自己伺服器內圖片的絕對路徑來添加半透明背景圖。如我現在的就是本地伺服器內的圖片，你們是用不了的喔。

藉助伺服器(如tomcat)使用該插件的小夥伴要注意啦，要保持伺服器常開才能顯示效果喔!

效果如圖!

最後提醒一下:自己開發前端的時候 務必要禁用!

如有想討論上面那串css代碼的 可以微信公眾號留言 我一 一解答

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！