7

鉴于此 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可以为“不透明”元素制作“不透明”边框吗？

4

5 回答 5

7

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

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

这将实现你想要的，一个带有透明背景的红色边框。演示在这里。但是，这不会使内部内容（例如图像或文本）透明。虽然您可以自由设置这些元素的不透明度，而不必担心父元素的边界。

您可以在此处和此处找到详细介绍不透明度和 RGBA 之间区别的好文章

应该注意的是，正如预期的那样，IE8 及以下版本不支持 RGBA，尽管它可以被CSS3 PIE “破解” 。

于 2012-11-27T14:23:32.773 回答
5

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

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

演示

此外，使用rgba()不透明容器不会使您的文本像opacity: .7以前那样不透明...

于 2012-11-27T14:22:50.970 回答
2

请参阅此问题的公认答案：https ://stackoverflow.com/a/4062032/1068266

它指出您可以使用 RGBA 格式作为边框颜色，并且通过设置“A”值可以设置边框的不透明度。然而，正如评论中所述， opacity CSS 属性设置整个对象的不透明度，包括边框。

于 2012-11-27T14:24:49.890 回答
2

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

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

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

于 2012-11-27T14:27:47.533 回答
1

恐怕唯一的方法是用另一个有边框的 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 用于背景颜色，但在这种情况下，所有内部内容都将保持不透明

于 2012-11-27T14:22:55.400 回答