CSS背景圖加陰影的制作方法

在CSS中，我們可以使用box-shadow屬性為元素添加陰影效果，也可以將背景圖作為元素的背景，以實(shí)現(xiàn)背景圖加陰影的效果。

以下是一個(gè)示例代碼，展示如何為具有背景圖的元素添加陰影：

.box {
  width: 200px;
  height: 200px;
  background-image: url('background.jpg');
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為.box的類，它擁有200px的寬度和高度，我們將背景圖background.jpg設(shè)置為這個(gè)元素的背景，我們使用box-shadow屬性為這個(gè)元素添加陰影效果。

box-shadow屬性的值可以分解為以下幾個(gè)部分：

- ***個(gè)值（10px）表示陰影的水平偏移量。

- 第二個(gè)值（10px）表示陰影的垂直偏移量。

- 第三個(gè)值（5px）表示陰影的模糊半徑。

- 第四個(gè)值（rgba(0, 0, 0, 0.5)）表示陰影的顏色和透明度。

通過調(diào)整這些值，你可以制作出不同效果的陰影，你也可以將背景圖替換為你喜歡的圖片，以實(shí)現(xiàn)個(gè)性化的背景圖加陰影效果。