如何在 HTML/CSS 中的图像背景上为内容创建一个白框？

Question

现在，我的文字直接放在背景图片上； 但我想在背景图像上添加一个白框，这样我就可以将我的文本放在白框中（为了更具视觉吸引力）。 我尝试将此添加到我的 CSS 表中：

.white-box {
    position: absolute;
    background-color: #FFFFFF;
    color: black;
    width: 50px;
    height: 50px;
    padding: 20px;
}

这在 HTML 页面中：

<body>
<div class="white-box">
Content
</div>
</body>

这不会改变我的网页，当我在线搜索这个问题时，我只会看到我已经尝试过的不同版本（如上所示）这是我想要实现的目标

我很感激任何帮助::)

Answer 1

尝试检查网站和它使用的 css。 这会给你更好的想法并更多地提高你的技能（：

我的方法是在外部 div 上设置背景图像并将溢出设置为滚动，然后在其中创建具有白色背景的 div ..如网站所示

Answer 2

查看此代码。 您不需要使用position: absolute如果图像放置在父元素上（在我的示例中div.image是div.content的父级）。

 * { box-sizing: border-box; } body { margin: 0; }.image { min-height: 100vh; background-image: url(https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg); background-size: cover; background-repeat: no-repeat; padding: 30px; }.content { background: white; padding: 15px; border-radius: 3px; }

 <div class="image"> <div class="content"> <h1>What is Lorem Ipsum?</h1> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div>

如果您想在文档正文上渲染图像，您可以将image class 添加到<body>而不是创建容器 div。

如何在 HTML/CSS 中的图像背景上为内容创建一个白框？

问题描述

2 个解决方案

解决方案1
0 2020-05-01 02:37:25

解决方案2
0 已采纳 2020-05-01 02:39:25

如何在 HTML/CSS 中的图像背景上为内容创建一个白框？

问题描述

2 个解决方案

解决方案1 0 2020-05-01 02:37:25

解决方案2 0 已采纳 2020-05-01 02:39:25

解决方案1
0 2020-05-01 02:37:25

解决方案2
0 已采纳 2020-05-01 02:39:25