0

简单的问题

目标：使边框（左右）完全透明，以便可以看到主体背景颜色。

尝试：http: //jsfiddle.net/ZRQmY/

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

我已经尝试了许多解决方法，但对我的具体问题无济于事。

你的包里还有什么技巧吗？

4

2 回答 2

0

发生这种情况是因为边框的背景是您的 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-30T13:25:22.213 回答
0

哈..在点击提交前几秒钟找到了答案。

确保设置要透明的元素的背景：background:none;或根本不设置任何内容。

编辑：谢谢大卫托马斯

如果不这样做，边框将（完全）透明。但是边框实际上是“绘制在”元素的背景色上；使背景颜色“通过”透明边框可见。

于 2013-02-13T22:40:59.090 回答