圖像和文字與不透明背景在同一個DIV

Question

我試圖使圖像和文字不透明！

背景出現在同一個div而不使用圖像作爲背景。我該如何做這項工作？

請參見圖片：

Answer 1

<div> 
    <span>Title</span> 
    <img src="" /> 
</div> 

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

Answer 2

/* Fallback for web browsers that doesn't support RGBa */ 
background: rgb(0, 0, 0); 
/* RGBa with 0.5 opacity */ 
background: rgba(0, 0, 0, 0.5); 

對於RGBA的最後一個字段是不透明。儘管如此，目前唯一完全跨瀏覽器的方法是使用透明圖像作爲背景，但在一些較舊的IE版本中並未完全支持。

Answer 3

你應該做的第一件事就是寫HTML：

<figure> 
    <img src="/image.jpg"> 
    <figcaption>Title</figcaption> 
</figure> 

之後，你只需要編寫CSS：例如：

figure { 
    position: relative; 
} 
figcaption { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0,0,0,.3); // or transparent gif 
} 

Answer 4

當你寫background-color:rgba(0,0,0,50);背景將是黑色的半透明。

它不會影響文本的透明度，因爲要設置文本的透明度，它是color:rgba(255,255,255,50);如果您不寫，文本將不會半透明。