若你的背景圖片是使用 CSS 寫入路徑的,那麼如何調整其圖片透明度呢?這篇既載一下其操作方法。
示範程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
css background image opacity"]<div class="to-intialize-overlay"> <div class="image-and-overlay"></div> </div> .to-intialize-overlay{ position: relative; z-index: 1; } .image-and-overlay{ margin:0px auto; background-image: url(https://picsum.photos/id/95/200/300); background-size:cover; background-position:center; background-repeat: no-repeat; background-attachment: fixed; /*讓圖片看起來會隨著滑鼠滾動*/ z-index: -1; top: 0; bottom: 0; left: 0; right: 0; position: absolute; opacity: 0.4; width: 100%; height:100%; } |
資料來源
1.Opacity in CSS background images
2.CSS background-image-opacity