html - "non-opacity""opacity"元素的边框

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 标签不透明，但也不需要边框。

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 .