如何在不透明度的情況下創建父div，同時保持100％的文本不透明度

所以我有一個帶有背景圖像的不透明度的div。我希望當鼠標懸停div時保持100％彈出的文本。任何人都可以幫助我呢？任何幫助將不勝感激！如何在不透明度的情況下創建父div，同時保持100％的文本不透明度

<body> 
    <div id="container"> 
     <div id="container_inner"> 
     <div id="container_txt"> 
      <p><a href="#">WORLD OF WARCRAFT</a></p> 
      <p id="p_txt">This is a simple World of Warcraft styled div that has been done implementing html, css, and css3</p> 
     </div> 
     </div> 
    </div> 
</body>

來源

2013-10-24 user2865400

你說的·我想徘徊div時彈出保持100％* –

在您的演示的情況下，文字的意思是，你能不能只刪除'opacity'性能，並降低alpa上的背景顏色？你已經用rgba設置了它，使用了半透明的不透明度。所以我很困惑 –

@PastorBones，-Koala我明白了這個問題，如果你們看到，這不是重複的。 –

我擺弄後，來到的結論是什麼，雖然是這是你需要什麼，我想。

以下是您必須使用的CSS。

小提琴：Click HERE

Demo（透明背景）

html, body { 
    margin: 0; 
    height: 100%; 
    background-color: #575980; 
} 
#container { 
    width: 200px; 
    height: 300px; 
    cursor: pointer; 
    overflow: hidden; 
    margin: 100px auto; 
    border: 1px solid #333; 
    background-color: #000; 
    box-shadow: 0px 2px 8px #111; 
} 
#container_inner { 
    opacity: .8; 
    margin: auto; 
    width: 200px; 
    height: 300px; 
    transition: .5s; 
    position: relative; 
    background-color: #FFF; 
    background-image: url('http://static.mmo-champion.com/mmoc/images/news/2010/march/ss973.jpg'); 
    background-size: 200% 100%; 
    background-position: 60% 50%; 
    box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5); 
} 
#container_inner:hover, #container_txt:hover { 
    opacity: 1; 
} 
#container_txt { 
    color: #fff; 
    height: 0px; 
    bottom: 0px; 
    width: 200px; 
    transition: .2s; 
    position: absolute; 
    font: normal 1em calibri; 
    background-color: rgba(0, 0, 0, 1); 
} 
#container_inner:hover #container_txt { 
    height: 100px; 
    opacity: 1; 
} 
p { 
    top: -5px; 
    padding: 0px 10px; 
    position: relative; 
} 
p a { 
    color: #fff; 
    text-decoration: none; 
} 
#p_txt { 
    top: -15px; 
    position: relative; 
    font-size: 12px; 
}

來源

2013-10-24 04:46:58

不錯的嘗試，但讓你想黑彈出透明和黑色彈出是不是透明 –

好文字是100％..對嗎？ –

剛剛添加的演示，以你的答案和投票:) –

的問題是，一個孩子不能比其父少不透明。在這種情況下，我將使用a：之後的僞元素來創建背景，而不是背景圖像，然後將背景圖像/不透明度/無論如何放在背景圖像上，然後將父級單獨放置。

我修改你的小提琴做到這一點（http://jsfiddle.net/srfGg/4/），但主要的關鍵是：

#container_inner:after{ 
    opacity:0.8; 
    transition:.2s; 
    content: ""; 
    display:block; 
    color:#FFF; 
    height:100%; 
    width:100%; 
    position: aboslute; 
    top:0;left:0;right:0;bottom:0; 
    background-color: #FFF; 
    background-image: url('http://static.mmo-champion.com/mmoc/images/news/2010/march/ss973.jpg'); 
    background-size: 200% 100%; 
    background-position: 60% 50%;  
} 
#container_inner:hover:after, #container_txt:hover { 
    opacity: 1; 
}

來源

2013-10-24 04:52:41 Ansikt

只是爲了更好的理解：

這個CSS改變整個元素的透明度（背景下，邊框，文本，包含子元素，...）

#container{ 
    background-color: #000; 
    opacity: 0.5; 
}

但是這個CSS改變了顏色的不透明度。這個「修改」的顏色將用於背景。

#container{ 
    background-color: rgba(0, 0, 0, 0.5); 
}

來源

2013-10-24 06:42:57 dalucks

如何在不透明度的情況下創建父div，同時保持100％的文本不透明度

回答

相關問題