Question

enter image description here 我想设置将在完整视口模式下显示的背景图像。我通过身体标签实现了这一目标。

body { background-image: url(/picture.jpg); }

我还想在背景图片下方添加文字，该文字会出现在同一网页的另一部分。但由于我使用了body标签，因此我无法在图像之后编写更多文本。我怎么能实现它？请帮忙。感谢

Answer 1

一个好主意是略微修改HTML结构。

<body>
    <div class="content-wrapper">
        <!-- All your HTML goes here -->
    </div>
    <div class="text-wrapper">
        <!-- Your required text comes here -->
    </div>
</body>

然后你可以修改你的CSS。

body .content-wrapper { background-image: url(/picture.jpg); }

希望有所帮助。

Answer 2

<body>
    <div class="image">
        <img></img> 
    </div>
    <div class="text">
        <!-- Your required text comes here -->
    </div>
</body>
<style>
    .image{ 
    width: 100%; 
    height: 100%;"
}
img{ 
    some style
}
.text{ 
    some style
}

</style>

如何在背景图片下添加文字？

2 个答案: