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 /></body></html>以上就是一个简单的设置图片渐变效果的方法，读者可以尝试自己设置其他渐变效果，制作出更加多彩的页面。