Question

鉴于此html

    <div id="my_div">   
    </div>

CSS

         #my_div {
            width: 100px;
            height: 100px; 
            background-color: #0f0;
            opacity: 0.4; 
            border: 3px solid #ff0000;
         }

我希望自己的div标签为opacity，但也不需要边框。

css可以为“不透明度”元素制作“非不透明度”边框吗？

Answer 1

没有non-opacity属性，但您可以做的是使用RGBA设置该div的背景颜色。这允许您基本上指定不透明度，但仅适用于背景（因此它不会影响边框）

background: rgba(0, 255, 0, 0.4);

这将实现您想要的效果，带有透明外观背景的红色边框。 Demo HERE。但是，这不会使内部内容（如图像或文本）透明。虽然您可以自由地设置这些元素的不透明度，而不必担心父级的边界。

你可以找到一篇很好的文章来详细说明不透明度和RGBA here和here

之间的区别

应该注意的是，正如预期的那样IE8 and below do not support RGBA，尽管它可以被CSS3 PIE“黑客攻击”。

Answer 2

使用CSS3 rgba，它是CSS，因此跨浏览器将是一个问题，但对于IE，您可以使用CSS3 Pie

#my_div {
     width: 100px;
     height: 100px; 
     background-color: rgba(R, G, B, A);
     border: 3px solid #ff0000;
}

Demo

此外，对不透明容器使用rgba()不会使您的文字变得不透明，因为使用opacity: .7来做...

Answer 3

请参阅此问题的已接受答案：https://stackoverflow.com/a/4062032/1068266

它表示您可以使用RGBA格式作为边框颜色，通过设置“A”值，您可以设置边框的不透明度。但是，如评论中所述，不透明度CSS属性设置整个对象的不透明度，包括边框。

Answer 4

不幸的是，当您对元素应用不透明度时，它也会应用于应用于元素的任何边距，填充或边框。

最好的解决方案是使用rgba（如前所述）并使用1x1不透明png作为旧版浏览器的后备（如果您支持它们）并将其用作元素的背景图像。

使用不透明度属性的一个缺点是，如果您的#my_div包含任何内容（文本或图像），则内容本身也会具有该不透明度，并且可能会导致不需要的样式。

Answer 5

~~我担心唯一的办法就是用另一个有边框的div包装你的div：~~ 其中一种方式就是这样（保持所有内部元素的不透明度）：

<div class="border">
    <div id="my_div">   
    </div>
</div>

CSS：

.border{
   border: 3px solid #ff0000;
   width: 100px;
   height: 100px; 
}
#my_div {
   width: 100px;
   height: 100px; 
   background-color: #0f0;
   opacity: 0.4;                 
}

或者像其他人一样告诉：rgba的背景颜色，但在这种情况下所有内部内容都将保持不透明

“不透明度”边框为“不透明度”元素

5 个答案: