[分享]css3文字加图片背景

CSS3是Web开发中的重要一环，它可以为你的网站增加许多新颖的效果和设计，例如文字加上图片背景。这样的效果能让你的网站更加有吸引力，并且帮助你吸引更多的用户。 / 这是我们的样式代码 / .text...

CSS3是Web开发中的重要一环，它可以为你的网站增加许多新颖的效果和设计，例如文字加上图片背景。这样的效果能让你的网站更加有吸引力，并且帮助你吸引更多的用户。

<style>
    /* 这是我们的样式代码 */
    .text-image {
        background: url('img/bg.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
        color: #fff;
        font-size: 36px;
        padding: 50px;
    }
</style> 

我们来看一下具体实现过程。首先，我们需要给这个文本添加一个类名：

<p class="text-image">这是一段加上图片背景的文本</p> 

然后，我们需要在样式表中添加以下代码：

<p>background: url('img/bg.jpg') no-repeat center center fixed;</p>
<p>-webkit-background-size: cover;</p>
<p>-moz-background-size: cover;</p>
<p>-o-background-size: cover;</p>
<p>background-size: cover;</p> 

这些代码中，我们设置了一个图片作为背景，这个图片我们设为bg.jpg，同时设置了图片的位置位于屏幕中心，并且设置背景图片大小适应屏幕大小。我们还可以设置文本居中，并且使文本颜色为白色，字体大小为36px，文本padding为50px。

最后，我们将这些代码整合到一起，就可以实现这种效果了。

<p class="text-image">这是一段加上图片背景的文本</p>

<style>
    /* 这是我们的样式代码 */
    .text-image {
        background: url('img/bg.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
        color: #fff;
        font-size: 36px;
        padding:50px;
    }
</style> 

通过这种简单的CSS3技巧，我们可以为网站增添更多的吸引力和互动性。