將不透明度應用於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中的元素

回答

相關問題