css在图片上面加字

CSS可以让我们在图片上面加字，使得图片更有表现力。下面介绍两种常见的方法。

一、使用background-image和:before伪元素。

.container {
    position: relative;
    width: 500px;
    height: 300px;
    background-image: url('example.jpg');
    background-size: cover;
    background-position: center;
}
.container:before {
    content: "这是图片上的文字";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 24px;
}

这个方法的原理是，利用:before伪元素在容器上叠加一层字体，使得文字显示在背景图片上面。需要注意的是，在:before中一定要设置content属性，否则伪元素无法生效。

二、使用position和z-index属性。

.container {
    position: relative;
    width: 500px;
    height: 300px;
}
.container img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}
.container p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #fff;
    font-size: 24px;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}
    

这个方法的原理是，利用position属性让文字和图片重叠，然后通过z-index属性设置文字显示在图片上面。需要注意的是，在使用z-index时，要将图片的z-index设为0，因为在没有设置z-index的元素默认为auto，auto比所有数字都小。

以上是CSS在图片上面加字的两种方法，开发者可以根据实际需求选择使用。

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