CSS可以幫助我們設置一些特殊的樣式，比如圖片漸變。那么如何實現呢？
.photo{
width: 400px;
height: 400px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 20%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0) 100%),
url('photo.jpg');
background-size: cover;
background-position: center;
}上述代碼中，我們先給圖片設置了一個容器photo，然后設置了容器的寬高，接下來設置了漸變效果：從頂部到底部，逐漸變為透明。然后，我們通過url將圖片添加到容器中，同時，設置了圖片的大小為cover，這樣可以確保不論圖片大小與容器大小差別多大，圖片都可以鋪滿整個容器。最后，我們設置了background-position為center，讓圖片居中顯示。
然后，再貼上一個完整的HTML代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>照片漸變效果</title>
<style>
.photo{
width: 400px;
height: 400px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 20%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0) 100%),
url('photo.jpg');
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div class="photo" />
</body>
</html>以上就是一個簡單的設置圖片漸變效果的方法，讀者可以嘗試自己設置其他漸變效果，制作出更加多彩的頁面。