顯示文字和圖像在同一時間：背景的不透明度

問：

我使用的不透明背景 CSS3這樣的代碼

編輯：（添加代碼）

CSS：

opecity { 
    opacity:.75; 
    content:('Hello'); 
    background:#111 url(../img/view.png) no-repeat center; 
} 
.opecity img:hover{ 
    -moz-opacity: 0.10; 
    opacity: 0.10; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70); 
    background:#000; 
}

HTML：只

<div class="opecity"> 
    <a class="example-image-link" href="img/port1.png" data-lightbox="example-1"> 
    <img class="example-image" src="img/port1.png" alt="thumb-1" width="250" height="220"/> 
    </a> 
</div>

此代碼顯示圖像，但不顯示內容 '你好'。但我想同時顯示圖像和內容。我也關心這個
Stackoweflow.com問題。

Image and text with opacity background in the same DIV

但我沒有得到解決。

來源

2013-08-30 bigtechideas

也可能是您的瀏覽器，你可以請告訴我們（HTML） – jcho360

它的CSS代碼.opecity {代碼的一部分 \t不透明度：0.75;內容:('你好'）;背景：＃111 url（../ img/view.png）no-repeat center; \t} .opecity img：hover { -moz-opacity：0.10; 不透明度：0.10; -ms-filter：「progid：DXImageTransform.Microsoft.Alpha」（Opacity = 70）; 背景：＃000; \t} – bigtechideas

其HTML代碼：

– bigtechideas

第一行，你opecity {，你應該使用.opecity，因爲它是一個類。
獨立的內容並把它放在自己的.classs {}

IE：

.example-image-link:hover:after { 
content:'Hello'; 
}

，如果你之前或圖像類後使用它不會工作（試一試）

< \ div class =「opecity」>

< \一類= 「示例圖像鏈接的」 href = 「IMG/port1.png」數據收藏夾= 「示例-1」> < \ IMG類= 「例如像」 SRC =「HTTP ：//humor.desvariandoando.com/wp-content/uploads/susto.jpg「 alt =」thumb-1「width =」250「height =」220「/>

。example-image-link：hover：after {content：'Hello'; }

刪除\和更改.example-image-link:hover:after爲img:hover:after

，您張貼他們用另一種方法鏈接：

試試這個：

<!DOCTYPE html> 
<html> 
<body> 
<style> 

div{ 
    position: relative; 
} 
span{ 
    background: rgba(0,0,0,0.5); 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    padding: 6px; 
    display: block; 
} 
</style> 

<div> 
    <span>Title</span> 
    <img src="http://humor.desvariandoando.com/wp-content/uploads/susto.jpg" /> 
</div> 

</body> 
</html>

（我把它來自你的鏈接）

您可以測試所有的HTML和CSS這裏：http://jsfiddle.net/

來源

2013-08-30 13:48:22 jcho360

from W3Schools：「內容屬性與：before和：after僞元素一起使用，以插入生成的內容。」

嘗試

.opecity:after { 
    content:'Hello'; 
}

來源

2013-08-30 13:16:07 Gileses

顯示文字和圖像在同一時間：背景的不透明度

回答

相關問題