html - 有没有办法用CSS定位边框(图像示例)？

以下是我想要的几个示例：

范例1：



范例2：



我尝试使用background，但是我不知道如何使背景小于其容器，因此我决定尝试使用border-bottom，并像sth一样使用10px-top放置背景。

我试过了：

background: rgba(196,196,196,0.8);
background-position: -10px 10px;

但是，我找不到如何设置边界的边界...有什么办法吗？

最佳答案

您可以通过:before实现

的HTML

<div class="wrap">
  <p class="text">Lorem ipsum dolor sit amet</p>
  <br />
  <p class="text alt">Amet cum et ad earum commodi</p>
</div>

的CSS

.wrap {
  padding: 50px;
  background: url(https://placedog.net/1000/500?id=12);
  background-size: cover;
}
.text {
  position: relative;
  z-index: 1;
  margin: 0 0 50px;
  font-size: 40px;
  font-family: sans-serif;
  display: inline-block;
}
.text:before {
  content: '';
  position: absolute;
  display: block;
  top: 15px;
  bottom: 15px;
  left: -20px;
  right: -20px;
  background: rgba(255,255,255,0.8);
  z-index: -1;
}

更改top, bottom, left, right中的值:before以适合您的需求。

JSFiddle：

https://jsfiddle.net/74kLwyxb/

关于html - 有没有办法用CSS定位边框(图像示例)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57286458/