有没有办法用 css 定位边框（图像示例）？

Question

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

示例 1：

示例 2：

我尝试使用 background 但我不知道如何使背景小于其容器，所以我决定尝试使用 border-bottom 并使用 [=14= 定位它] 喜欢 10px-top.

我试过：

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

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

Answer 1

可以使用border-imagecss属性。更多信息 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>

Answer 2

您可以通过 :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/

有没有办法用 css 定位边框（图像示例）？

Is there way to position border with css (IMAGE EXAMPLE)?

html

css

wordpress

background

border