css 图片下边缘 半透明

很多网页设计师在设计网站时，经常会使用半透明的效果来增强页面的美观度和艺术感。而实现图片下边缘半透明的效果，CSS是一个非常好的选择。

实现过程如下：

/*CSS样式*/
img{
    position: relative;
}

img:after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(rgba(0,0),rgba(0,0.5));
}

使用上述CSS样式，实现了图片下边缘60像素高度的半透明效果。其中，

• img的position属性值为relative，表示图片相对于其原来的位置进行定位。
• img:after是伪元素，通过其content属性为空，使用position:absolute属性为其定位。left和bottom属性为0，表示距离图片的左和下边框的距离为0。width为100%，表示其宽度与图片的宽度相同；height为60px，表示其高度为60像素。background属性使用了CSS3的渐变效果函数linear-gradient，表示从上到下分别为透明和50%的黑色半透明。

这样，图片下方的60像素高度区域便被覆盖了一个黑色半透明的渐变层，实现了图片下边缘半透明的效果。此外，如果想要改变透明度，可以通过修改渐变函数中rgba中的第四个参数进行设置。