在圖像上的透明框

好吧，我試圖對圖像進行基本的疊加，但似乎我做錯了什麼，而不是IMG的寬度和高度100％，它是寬度和高度的100％整個頁面在圖像上的透明框

HTML

<div id="main_BodyNews"> 
       <img src="img/main.png" alt="mainNews" /> 
       <div class="overflow-box"></div> 
    </div>

而CSS

#main_BodyNews { 
    width: 50%; 
    height: 300px; 
    background-color: #F2C68C; 
    margin-top: 50px; 
    margin-left: 20px; 
    float: left; 
    border-radius: 5px; 
    border: 1px solid #F2C68C; 
} 

#main_BodyNews img { 
    width: 100%; 
    height: 100%; 
    border-radius: 5px; 
    background-color: 1px solid #F2C68C; 
    position: relative; 
} 

.overflow-box { 
    position:absolute; 
    top: 0px; 
    left: 0px; 
    bottom: 0px; 
    right: 0px; 
    background-color:rgba(255,255,0,0.5); 
    width: 100%; 
    height: 100%; 
}

JS提琴：https://jsfiddle.net/0utbjwo0/

來源

2016-12-14 Tomislav Nikolic

必須是相對於父元素，而不是兄弟。 – PHPglue

你應該添加position: relative;您absolute父DIV

#main_BodyNews{ 
    position: relative; 
}

#main_BodyNews { 
 
\t width: 50%; 
 
\t height: 300px; 
 
\t background-color: #F2C68C; 
 
\t margin-top: 50px; 
 
\t margin-left: 20px; 
 
\t float: left; 
 
\t border-radius: 5px; 
 
\t border: 1px solid #F2C68C; 
 
    
 
    position: relative; 
 
} 
 

 
#main_BodyNews img { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t border-radius: 5px; 
 
\t background-color: 1px solid #F2C68C; 
 
\t position: relative; 
 
} 
 

 
.overflow-box { 
 
\t position:absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    background-color:rgba(255,255,0,0.5); 
 
}

<div id="main_BodyNews"> 
 
\t \t \t \t <img src="img/main.png" alt="mainNews" /> 
 
\t \t \t \t <div class="overflow-box"></div> 
 
\t \t \t </div>

來源

2016-12-14 02:00:24 Rahul

是的，做的工作，謝謝隊友！ –

很高興我可以幫忙，如果它適合你，你可以將它標記爲已被診斷 – Rahul

這是因爲位置是：絕對有上，右，下，左值0。你不需要指定高度和寬度。要調整它的父級大小。你需要位置：相對於父元素。

#main_BodyNews { 
 
    width: 50%; 
 
    height: 300px; 
 
    background-color: #F2C68C; 
 
    margin-top: 50px; 
 
    margin-left: 20px; 
 
    float: left; 
 
    border-radius: 5px; 
 
    border: 1px solid #F2C68C; 
 
    position: relative; 
 
} 
 

 
#main_BodyNews img { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 5px; 
 
    background-color: 1px solid #F2C68C; 
 
    position: relative; 
 
} 
 

 
.overflow-box { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    background-color: rgba(255, 255, 0, 0.5); 
 
}

<div id="main_BodyNews"> 
 
    <img src="img/main.png" alt="mainNews" /> 
 
    <div class="overflow-box"></div> 
 
</div>

來源

2016-12-14 02:00:29

，可以使用絕對。這只是你設定的寬度：100％; 身高：100％;

刪除並設置您的頁邊距和頁邊距。您可以爲圖片的實際尺寸設置寬度和高度。如果你這樣做，你不必將你的覆蓋div完全保留在你的圖像div。這是我爲我的網站製作的一個示例。

#overlay { 
margin-top: 60px; 
margin-left: 88px; 
height: 30px; 
width: 85px; 
position: absolute; 
}

您可以暫時爲其設置背景色，以便您可以很好地瞭解它放置在頁面上的位置。然後相應地調整您的利潤率。

來源

2016-12-14 02:05:17 Prox

在圖像上的透明框

回答

相關問題