css在图片上写文字

CSS是一种用于网页设计的语言，它可以通过在HTML文档中添加样式来控制网页的外观和布局。在网页设计中，经常需要在图片上写一些文字来说明图片的内容或起到美化作用。这时候，就可以使用CSS来实现在图片上写文字的效果。

img {
    position: relative;
}
img:hover:after {
    content: attr(alt);
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    padding: 10px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    z-index: 999;
}
    

上面的代码是一种常见的在图片上写文字的方法。通过设置图片的position属性为relative，可以使得图片和文字在同一层级上。然后，在图片的hover状态下，使用CSS的伪元素:after在图片上添加一个透明的背景，然后显示图片的alt属性作为文字。

接下来，可以通过控制背景颜色、字体大小、文字对齐方式等属性来美化文字的效果。下面是具体代码的解释：

content: attr(alt);
      //使用alt属性作为文字内容position: absolute;
       //绝对定位top: 0;
                   //距离顶部为0left: 0;
                  //距离左侧为0background: rgba(0, 0, 0, 0.6);
       //使用半透明黑色背景width: 100%;
              //宽度与图片相同padding: 10px;
            //文字和背景的间距为10pxcolor: #fff;
              //文字颜色为白色font-size: 18px;
          //文字大小为18pxtext-align: center;
       //文字居中显示z-index: 999;
             //z轴上最高，比图片和其他元素都高

总的来说，通过CSS在图片上写文字可以增强网页的视觉效果，提高用户的交互体验。需要注意的是，不同浏览器对CSS伪元素的支持程度可能不同，需要进行兼容性测试。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！