[分享]css中字体放在图片上

CSS中有一个很实用的技巧，就是让字体放在图片上，这样可以使得图片和文字紧密结合，让页面更加美观。下面我们来详细介绍一下这种技巧的实现方法。.photo { : relative; display: ...

CSS中有一个很实用的技巧，就是让字体放在图片上，这样可以使得图片和文字紧密结合，让页面更加美观。下面我们来详细介绍一下这种技巧的实现方法。

.photo {
    position: relative;
    display: inline-block;
}

.photo:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url("image.jpg");
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.content {
    position: relative;
    z-index: 1;
    padding: 20px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #fff;
    text-align: center;
} 

首先需要在HTML中添加一个包裹图片和文字的容器，如下所示：

<div class="photo">
    <div class="content">
        <p>这里是文字内容</p>
    </div>
</div> 

然后需要设置图片容器的position属性为relative，同时设置文字容器的z-index属性为1，让文字容器在图片容器之上。

接着使用伪元素:before来实现将图片放在文字之下的效果。在伪元素中设置背景图片、位置和z-index属性，使其在文字容器之下。最后使用padding属性给文字容器添加一些内边距，让文字和图片之间有一定的距离。

有了这些设置，就可以轻松实现将文字放在图片上的效果了。