将不透明度应用于CSS中的元素

我有一个名为signup-box的div元素，我希望将0.65的不透明度值应用于它，但是似乎有这样做的副作用。出于某种原因，它也适用于该div内的所有内容。例如，我的白色文本不会显示为白色，而且输入也不是白色。我能做些什么来保持透明效果而不会丢失我想保留的设计方面？ http://jsfiddle.net/HKy3F/5/将不透明度应用于CSS中的元素

来源

2012-03-11 user1174762

http://stackoverflow.com/questions/3350579/css-element-opacity-that-does-not-affect-transparency-of-its-contents，http：// stackoverflow.com/questions/4182304/how-to-not-apply-opacity-for-child-element – c69 2012-03-11 02:14:50

这是不透明属性的行为（它适用于该元素中的所有内容）。如果您只想将不透明度应用于背景，则需要使用65％透明黑色框创建图像，或者可以使用CSS3颜色RGBA函数以65％不透明度生成黑色（不适用于IE < 9）。

background: rgba(0, 0, 0, 0.6);

Which produces this jdFiddle.希望这就是你要找的。

来源

2012-03-11 02:08:15 animuson

检查一下，这应该回答你的问题，使用背景rgba而不是你的盒子上的不透明度。

http://jsfiddle.net/camus/Xb5TU/

#signup-box { 
    height: 330px; 
    width: 350px; 
    background-color: rgba(0,0,0,0.65); 

    border-radius: 8px; 
}

来源

2012-03-11 02:13:22 mpm

-1

您是否尝试过使用2周的div - 一个背景和一个用于内容？

在我的例子中，我有一个不透明度为65％的背景色#ffffff。

这里是CSS：

 

    body { background:#000000 ; 
    margin:auto ; 
    padding:15px ; 
    } 

    #divA { background:#ffffff ; /* this is your background */ 
    /* IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 

    /* IE 5-7 */ 
    filter: alpha(opacity=65); 

    /* Netscape */ 
    -moz-opacity: 0.65; 

    /* Safari 1.x */ 
    -khtml-opacity: 0.65; 

    /* Good browsers */ 
    opacity: 0.65; 

    display:block ; 
    width:300px ; 
    height:300px ; 
    margin:auto ; 
    z-index:1 ; 
    } 

    #divB { display:block ; /* this is where your content goes */ 
    padding:20px ; 
    width:250px ; 
    height:260px ; 
    text-align:center ; 
    color:#C00 ; 
    font-family:Arial, Helvetica, sans-serif ; 
    font-size:24px ; 
    text-align:center ; 
    margin:auto ; 
    z-index:5000 ; 
    }

，这里是实现它的HTML：

 

    ‹div id="divA"› 
    ‹div id="divB"›text goes here‹/div› 
    ‹/div›

它工作在IE7，IE8，IE9，FF，歌剧，Safari和Chrome

祝你好运！

辛西娅

来源

2012-03-11 04:42:57 Cynthia

一个简单的方法是创建你所需要的透明小png文件并将其设置为父元素的背景。这将是所有浏览器:)

来源

2012-03-11 09:51:29 rzr

将不透明度应用于CSS中的元素

回答

相关问题