CSS3中的陰影背景圖片是一種很酷的效果,讓圖片看起來像是漂浮在頁面上,而不是像傳統的背景圖片那樣被拉伸到整個頁面。下面是一個簡單的陰影背景圖片的示例:
.box { background-image: url('image.jpg'); box-shadow: 0 0 20px rgba(0,0,0,0.6); }
這個示例中,.box是一個具有背景圖片的元素。box-shadow屬性使元素產生了一個20像素的陰影。這個陰影通過rgba()來定義,這表示陰影是黑色的,不透明度為0.6。這種方式使得陰影不是完全黑色,使它看起來更加自然。
如果你想讓陰影只出現在圖片的周圍,可以將陰影的屬性改為:
.box { background-image: url('image.jpg'); box-shadow: 0 0 20px rgba(0,0,0,0.6), inset 0 0 0 1000px rgba(0,0,0,0.2); }
這個示例中,除了box-shadow屬性外,還加上了inset關鍵字和一個更大的陰影長度。inset表示陰影是嵌入的,也就是說它不在元素的外部,而是在元素的內部。因此,我們需要使用更大的陰影長度來保證它完全覆蓋了元素。
上述示例中,inner陰影的顏色是rgba(0,0,0,0.2),它是一個更淺的黑色,透明度更高,因此,更清晰地顯示圖片
在實際的網頁中,你可以使用這個技巧來使您的圖片看起來更漂亮,更現代。所以,現在你可以用上這個技巧,使你的網站更吸引人了!