如何让 div 变得透明？答案

【问题标题】：how to get transparent for the div?如何让 div 变得透明？
【发布时间】：2014-01-08 12:20:58
【问题描述】：

CSS 是否提供了在角落显示背景图像的选项 transparent。

而不是在 (DEMO) 中显示白色背景

避开白色区域

#octagon {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    margin: 50px auto 0;
}

#octagon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid red;
    border-left: 29px solid red;
    border-right: 29px solid #eee;
    width: 42px;
    height: 0;
}

http://jsfiddle.net/L8JUJ/4/

【问题讨论】：

u 添加样式 opacity:0.6;
@Deepak Saralaya 实际上根本不需要显示白色。需要显示bg
基本上不可能。伪元素包含在主对象内，因此将始终具有相同的背景。
@Paulie_D 是否有任何选项在角落处制作一个形状并放置right: -20px，显示在div 的一侧！

标签： css html pseudo-element pseudo-class

【解决方案1】：

Working Fiddle

对边距进行了细微的更改和调整。

CSS：

body{
    background: url(http://placehold.it/350x150&text=FooBar1) repeat;
}
#octagon {
    width: 100px;
    height: 71px;
    background: red;
    position: relative;
    margin: 99px 10px 0px 100px;
}

#octagon:before {
    content: "";
    position: absolute;
    top: -29px;
    left: 0;
    border-bottom: 29px solid red;
    border-left: 29px solid red;
    border-right: 29px solid transparent;
    width: 42px;
    height: 0;
}

【讨论】：

【解决方案2】：

#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid red;
border-right: 29px solid #eee;
width: 42px;
height: 0;
opacity:0.6;

}

【讨论】：

不是syre，这是cortect。是的，它使那个角落透明但不完全。这允许红色显示出来。我相信 OP 希望看到文本流血......

【解决方案3】：

对于透明边框，您可以使用

修改#octagon:before border-right

border-right: 29px solid rgba(0,0,0,0.5);

这不会给你想要的效果，因为在后面有一个已经有背景颜色的元素，所以唯一的方法是在你的代码中添加一些 js，例如： http://jquery.malsup.com/corner/

【讨论】：