css在图片上加字

CSS可以让我们在图片上加上各种文字，与图片相互呼应，增强网页的美观性和信息量。下面我们来看看如何通过CSS实现。

/*首先给图片定义一个position:relative属性，然后通过绝对定位来将文字放在图片上*/.img-container {
    position: relative;
}
.img-container p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
    text-shadow: 0 0 5px #000;
}
/*用background-image属性来将图片作为背景，然后在文字后面加上一个半透明的背景，突出文字*/.img-bg {
    background-image: url("image.png");
    background-size: cover;
}
.img-bg p {
    background-color: rgba(0,0,0,0.5);
    padding: 10px;
}
/*另一种方法是使用 ::after 伪元素，在图片上放置一个透明的盒子，再在盒子里放置文字*/.img-after {
    position: relative;
}
.img-after::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}
.img-after p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
    z-index: 1;
}
    

这些CSS代码可以根据自己的需要进行调整，比如更改文字的颜色、大小、位置，改变背景色透明度等等。总之，CSS让我们在图片上添加文字变得更加简单而美观。

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