帶有Css背景顏色的文本在圖像上

我想要一個帶有文本的div在圖像上方顯示。你可以（種）看看我在這裏試圖做什麼：http://innerwestadv.com/odom/在右下角的聯繫方式。文字出現在圖像上方，但背景顏色顯示在下方。帶有Css背景顏色的文本在圖像上

下面是HTML：

<div class="visible-all-devices ftr-widget"> 
<h2>Contact</h2> 
<div class="textwidget"> 
    <p><a href="http://innerwestadv.com/odom/contact/"><img width="328" height="254" alt="map" src="http://innerwestadv.com/odom/wp-content/uploads/2015/05/map.jpg" class="aligncenter size-full wp-image-121"></a></p> 
    <div class="contact-box"> 
     <h4>One Day One Million</h4> 
     <p>(775)359-3000 x 129<br> 
     985 Damonte Ranch Parkway<br> 
     Suite 310<br> 
     Reno, NV 89521 
    </p> 
</div> 
</div> 
</div>

而CSS：

.contact-box { 
    background-color: rgba(2, 54, 110, 0.8) !important; 
    margin: -140px auto 0; 
    padding: 10px; 
    width: 80%; 
}

我怎樣才能框出現在圖像上面？

來源

2015-05-27 MattM

.contact-box { 
    /* Add this */ 
    position: absolute; 

    background-color: rgba(2, 54, 110, 0.8) !important; 
    margin: -140px auto 0; 
    padding: 10px; 
    width: 80%; 
}

來源

2015-05-27 21:38:43 dojs

使用絕對定位：

首先，在父容器設置position:relative;：

div.textwidget {position:relative;}

接下來，把絕對定位上盒（到您的風格上面添加這些）：

.contact-box { 
    position:absolute; 
    bottom:0; 
    left:10px; 
}

來源

2015-05-27 21:38:58

您需要使用

.textwidget{ 
    position:relative; 
}

父，然後<p>和<div class="contact-box">可以具有

position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100%;

，這將是相對於親本。您也可以使用z-index來確定訂單。

來源

2015-05-27 21:40:33

將.textwidget設置爲相對位置，而不是接觸盒上的負邊距，將其定位爲絕對位置。我不確定你爲什麼在背景顏色上很重要，因爲你不需要它。

.textwidget { 
    position: relative 
} 

.contact-box { 
    background-color: rgba(2, 54, 110, 0.8); 
    position: absolute; 
    padding: 10px; 
    width: 80%; 
    bottom: 0; 
}

https://jsfiddle.net/kavzh6n5/

編輯：將您的文字跨度正好圖像，添加 '顯示：inline-block的' 的全寬.textwidget和 '寬度：100％' 來。聯繫-框。更新小提琴在這裏：https://jsfiddle.net/kavzh6n5/1/

來源

2015-05-27 21:44:42 evalunamain

帶有Css背景顏色的文本在圖像上

回答

相關問題