CSS 中,通過設置圖片背景的透明度的方法來得到朦朧的效果,此方法可以用在需要強調頁面元素的情況下使其更加突出。
background-image:url("example.jpg"); opacity:0.4; filter:alpha(opacity=40);
上面是使用 CSS 的 background-image 屬性來設置背景圖片,同時通過設置 opacity 和 filter 屬性來使背景圖片變得朦朧。
其中,opacity 屬性設置圖片的透明度,其取值范圍為 0~1,0 表示圖片完全透明,1 表示圖片完全不透明。而 filter 屬性則是針對舊版的 IE 瀏覽器的兼容,其中 alpha() 函數用來指定透明度,取值范圍也是 0~100。
需要注意的是,這種方法雖然簡單易用,但是其缺點是:當圖片較小且背景顏色與其接近時,往往會導致顯示出來的效果不太理想,這時可以嘗試使用其他方式或者采用更大的圖片來避免這種情況。
上一篇vue打開json文件
下一篇vue打印隱藏頁面