完全透明邊框

目標：做一個邊框（左，右）完全透明的，所以身體的背景顏色可以識破。

<html> 
<body> 
<div id="wrap"> 
<div class="trap"> 
    Make the white borders transparent, so when I change the background color the background color will be seen through the borders. 
    I've tried rgb() with opacity but no luck 
</div> 
<div class="trap2"> 
    This is what I'd like but I'm setting the border = bg color; 
</div> 

</div> 
</body> 
</html>

CSS

body {background:#eee;} 
#wrap {padding:50px;} 
.trap { 
width:350px; 
background: rgb(238, 238, 238); 
border-right: 30px solid transparent; 
border-left: 30px solid transparent; 
border-bottom: 30px solid rgb(216, 199, 143); 
} 
.trap2 { 
width:350px; 
margin-top:100px; 
background: rgb(238, 238, 238); 
border-right: 30px solid #fff; 
border-left: 30px solid #fff; 
border-bottom: 30px solid rgb(216, 199, 143); 
}

我已經嘗試了許多變通辦法都無濟於事我的具體問題。

你的包裏還有什麼竅門？

來源

2013-02-13 andrewk

你確定你不只是想要利潤？ – zzzzBov 2013-02-13 22:41:52

他想要有像梯形一樣的底部邊框，順便說一句。它適用於我的Chrome – pwolaq 2013-02-13 22:44:27

哈..在提交之前找到了答案。

確保將您想要透明的元素的背景設置爲：background:none;或根本沒有。

編輯：感謝大衛·托馬斯

如果你不這樣做，邊框是（完全）透明。但是邊界實際上是「拉開」元素的背景顏色的;以便背景顏色透過透明邊框可見。

來源

2013-02-13 22:40:59 andrewk

否：'border'將（完全）透明。但是'邊界'實際上是'畫出'元素的'背景顏色'的;所以'背景顏色'通過透明的'邊框'是可見的。 – 2013-02-13 22:42:33

有意義，但'劃過'是模糊的。我編輯它。 TX – andrewk 2013-02-13 22:52:19

這是因爲邊框的背景是你div的背景，而不是身體。閱讀這篇文章，以供參考：http://css-tricks.com/transparent-borders-with-background-clip/

此代碼：

#yourElement { 
-moz-background-clip: padding;  /* Firefox 3.6 */ 
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */ 
background-clip: padding-box;  /* Firefox 4, Safari 5, Opera 10, IE 9 */ 
}

使邊境停留在div外面，所以具有透明度設置你看到身體背景的顏色，而不是DIV背景顏色。

這是你更新的提琴：http://jsfiddle.net/C9gJQ/
我使用部分透明度的邊界，所以你可以看到它的行爲方式，但你可以將其更改爲任何你喜歡的。

來源

2014-05-30 13:25:22 oneday

完全透明邊框

回答

相關問題