PHP 图片渐变透明效果实现教程 - 从上到下渐变

可以使用CSS的渐变透明度属性来实现图片从上到下渐变透明效果。

1. 添加图片元素

2. 设置渐变透明度

img {
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

这段CSS代码将在图片上方创建一个渐变透明度背景，从透明到不透明。可以通过调整颜色和方向来定制渐变效果。

3. 使渐变只出现在顶部

为了使渐变透明度只出现在图片的顶部，可以将图片和渐变背景放在一个包含元素中，并设置该元素的position属性为relative，然后将渐变背景的position属性设置为absolute，并将top和left属性设置为0。

.image-container {
  position: relative;
}

.gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

这样就可以实现图片顶部的渐变透明度效果了。