边框图像与不透明度

Question

我有这个：

.striped-border {
    border: 8px solid transparent;
    border-image: url(../img/stripes.png) 9 round;
}

我想要的是什么：

是否可以将不透明度应用于仅限边框图像而不是内容？

Answer 1

您可以使用pseudo-element创建border-image边框，然后设置opacity。

＆＃13;

＆＃13;

div {
  position: relative;
  margin: 50px;
  font-size: 25px;
  padding: 10px 25px;
  display: inline-block;
}
div:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 5px solid transparent;
  border-image: url('http://www.circlek.org/Libraries/2013_branding_design_elements/graphic_CKI_horizontal_stripesblue_RGB.sflb.ashx') 22 22 repeat;
  transform: translate(-5px, -5px);
  opacity: 0.4;
}

＆＃13;

<div>Element</div>
<div>Element <br> lorem</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

类似的东西：

.striped-border:after{
    content:"";
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    border:8px solid rgba(256,256,256, 0.5);
}