文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在HTML/CSS中为图像背景上的内容创建白色框？

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

Stack Overflow用户

提问于 2020-05-01 02:31:50

回答 2查看 4.2K关注 0票数 0

现在，我的文本直接在背景图像上；但是我想在背景图像上添加一个白色框，这样我就可以将我的文本放在白框中(以便更有视觉吸引力)。我尝试将它添加到我的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>

这不会改变我的网页，当我在网上搜索这个问题时，我只看到了我已经尝试过的(如上面所示) 以下是我想要达到的目标的不同版本

谢谢你的帮助！)

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-05-01 02:39:25

看看这段代码。如果图像放在父元素上，则不需要使用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类添加到<body>中，而不是创建容器div。

票数 0

Stack Overflow用户

发布于 2020-05-01 02:37:25

试着检查网站和它使用的css。这给了你更好的想法，提高了你的技能。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61535945

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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