ảnh Biên phòng với opacity

Question

Tôi có điều này:

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

Những gì tôi muốn:

Có thể áp dụng một opacity đến biên giới hình ảnh chỉ và không phải là nội dung?

Answer 1

Bạn có thể sử dụng để tạo ra pseudo-element biên giới với border-image và sau đó thiết lập opacity.

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; 
 
}

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

Answer 2

gì về một cái gì đó giống như nó:

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