與透明度

邊境圖像我有這樣的：與透明度

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

我想要什麼：

是否有可能一個不透明度適用於邊境僅圖像而不是內容？

來源

2017-07-13 Carlos Torres

邊界圖像添加到一個僞元素，並使用透明度 –

@雷納德的解決方案：https://jsfiddle.net/bu6xt7pc/1/ –

您可以使用pseudo-element與border-image創建邊框上，然後設置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>

來源

2017-07-13 15:56:40

太好了，謝謝！更新搗鼓參考：https://jsfiddle.net/bu6xt7pc/ –

跟進的問題：當添加一個形式，一個輸入和按鈕，它們顯示但顯然無效。任何想法來啓用它們？再次感謝！ https://jsfiddle.net/bu6xt7pc/3/ –

關於類似的東西是什麼：

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

來源

2017-07-13 15:45:51 Mohsen

這似乎並不工作：https://jsfiddle.net/xd1s93hb/ –

RGBA將無法正常工作。 OP需要邊界圖像而不僅僅是純色。這就是說......僞元素是要走的路。 –

Jacques Marais，嘗試將頂部，左側，底部，右側設置爲8px。確保.striped界：是之後在從你的元素 – Mohsen

回答

相關問題