[英]How do I make a semi-transparent border with CSS?
I have a popup and I want to give it a transparent border. 我有一个弹出窗口,我想给它一个透明的边框。 I have these properties set:
我设置了这些属性:
li.sub-nav ul.megamenu {
position: absolute;
left: 0;
margin-top: 10px;
z-index: 100;
padding-top: 3px;
-moz-background-clip: border; /* Firefox 3.6 */
-webkit-background-clip: border; /* Safari 4? Chrome 6? */
background-clip: border-box;
}
.nav-top-container .megamenu {
background: #005525;
background: rgba(0, 85, 37, .98);
border-top: 1px solid #227b33;
border-bottom: #005525;
border-bottom:8px solid rgba(0, 85, 37, .98);
}
I added the background-clip
properties according to this article , I also tried setting it to content
and padding
, but it isn't working. 我根据本文添加了
background-clip
属性,还尝试将其设置为content
和padding
,但是它不起作用。
Use background-clip
on the padding
, as it is the closest box-model to the border. 在
padding
上使用background-clip
,因为它是最接近边框的盒子模型。 The default is border
, which causes the background to be behind the transparent border. 默认值为
border
,这会使背景位于透明边框的后面。
body { background: yellow; } div { padding: 30px; background-color: white; border: 15px solid rgba(255,0,0,0.5); -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; }
<div></div>
As I indicated in my comment to @LGSon, the issue you are frustrated with is that the background
of your element extends into the border area. 正如我在对@LGSon的评论中所指出的那样,令您沮丧的问题是元素的
background
延伸到边框区域。 An easy workaround for this is to apply that background to a nested element like in the following example: 一个简单的解决方法是将背景应用于嵌套元素,如以下示例所示:
https://jsfiddle.net/yqx7abd8/ https://jsfiddle.net/yqx7abd8/
body { background: url(http://lorempixel.com/800/800/city/1) center / cover; } .border { margin: 30px; border: 15px solid rgba(255,0,0,0.3); } .content { background: #fff; padding: 30px; }
<div class="border"> <div class="content"> <p> My Content </p> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.