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

Question

下面是我想要的几个例子:

示例 1:

示例 2:

我尝试使用 background 但我不知道如何使背景小于其容器，所以我决定尝试使用 border-bottom 并定位它与 sth 类似 10px-top。

我试过:

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

但是，我找不到如何放置边框...有什么办法吗？

Answer 1

你可以用 :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;
}

更改 :before 中的值 top, bottom, left, right 以满足您的需要。

JSFiddle:

https://jsfiddle.net/74kLwyxb/