[分享]css中 图片背后跟文字

CSS中有一种常见的技巧，可以让文字显示在图片的后面，这种技巧可以让页面看起来更具有层次感和美观性。实现这种效果的方法非常简单，只需要用到CSS的background属性即可。我们可以在CSS中指定一...

CSS中有一种常见的技巧，可以让文字显示在图片的后面，这种技巧可以让页面看起来更具有层次感和美观性。

实现这种效果的方法非常简单，只需要用到CSS的background属性即可。我们可以在CSS中指定一个图片作为元素的背景，然后再在元素上添加文本。

 .container {
        background-image: url('图片地址');
        background-repeat: no-repeat;
        background-size: cover;
        padding: 50px;
    }

    .container p {
        color: #fff;
        font-size: 20px;
    } 

在上面的代码中，我们首先定义了一个类名为container的元素，并指定了背景图片的地址，同时设置了背景图片不重复且填充整个元素区域。

接下来，我们在.container p规则中指定了段落的样式，包括文本颜色、字体大小等。在实际应用中，我们可以将.container换成任何需要添加背景图片的元素。

除了用background-image属性，我们还可以利用background属性的多个值来同时指定背景图像、背景颜色、背景定位等。例如：

 .container {
        background: url('图片地址') center/cover no-repeat;
        padding: 50px;
    } 

通过上面的代码，我们同样实现了在背景图片后显示文本的效果。background属性中的"center/cover no-repeat"代表背景图片居中且不重复平铺。此外，在background中还可以使用其他值，例如background-color来指定背景颜色，background-position来修改背景位置等。

总的来说，利用CSS在图片背后添加文本是一项实用的技巧，可用于改善页面的布局和视觉效果。