我想達到的目標
您所看到的影像是我想要實作的。
到目前為止我做了什么：
<div class="col">
<div class="square">
<img src="images/img1.png" id="img1">
</div>
</div>
這是CSS
.square{
position:absolute;
background-color:white;
opacity:0.5;
height:200;
width:200px;
}
#img1{
width:200px;
height: 200px;
}
感謝收到的回復。我想我沒有明確我的要求。在我發布的影像中，我希望能夠擁有一個帶有透明覆寫層的影像，該影像不覆寫所有影像，而僅覆寫影像的“標題”部分。這就是我一直在掙扎的地方。
uj5u.com熱心網友回復：
雖然有幾種方法可以實作這一點，但我認為最簡單的方法如下：
.imgContainer {
width: 100px;
height: 100px;
background-color: black;
}
.imgOverlay {
width: 100%;
height: 30px;
background-color: rgba(255,255,255,.5);
}<div class="imgContainer">
<div class="imgOverlay">
<p>I'm some text!</p>
</div>
</div>我在這里所做的是將另一個 div 元素插入包含影像的 div 中。該imgOverlay班有一個背景顏色設定為rgba(255,255,255,.5);。rgba是“Red Green Blue Alpha”，Alpha 控制背景顏色的不透明度。您可以將 alpha 值設定為 0（透明）到 1（不透明）之間的任何值。
出于您的目的，您可以將imgContainer元素設定為使用背景影像代替背景顏色。我希望這是有幫助的！
uj5u.com熱心網友回復：
.square {
position: relative;
background-color: white;
opacity: 0.5;
height: 200;
width: 200px;
}
#img1 {
width: 200px;
height: 200px;
}
p {
position: absolute;
top: 0px;
left: 0
}<div class="col">
<div class="square">
<img src="images/img1.png" id="img1">
<p>text here</p>
</div>
</div>uj5u.com熱心網友回復：
您不一定需要定位來創建不透明背景，您也可以使用帶有 alpha 值的背景顏色（并洗掉opacity: 0.5）。
.square{
background-color: rgba(255, 255, 255, 0.5);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/381456.html
上一篇：如何通過移動固定距離來獲取經緯度點（適用于谷歌地圖掃描視窗）？
下一篇：如何融合兩個16位影像