有没有办法用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/

Answer 2

您可以使用border-image css 属性。更多信息here

演示

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round;
  -o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round;
  border-image: url(https://www.w3schools.com/cssref/border.png) 30 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch;
  -o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch;
  border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch;
}

<p id="borderimg1">Here, the image tiles to fill the area. The image is rescaled if necessary, to avoid dividing tiles.</p>
<p id="borderimg2">Here, the image is stretched to fill the area.</p>