Question

好吧所以我试图对图像进行基本覆盖，但似乎我做错了，而不是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/

Answer 1

您应该将position: relative;添加到absolute父div

#main_BodyNews{
  position: relative;
}

#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>

Answer 2

这是因为position：absolute的top，right，bottom，left值为0.您不需要指定高度和宽度。要使其调整其父级大小。你需要位置：父元素的相对。

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

Answer 3

你可以使用绝对。只是你正在设置宽度：100％; 身高：100％;

删除它并设置边距顶部和边距。您可以为图像的实际尺寸设置宽度和高度。如果你这样做，你不必将你的叠加div完全保留在你的图像div中。这是我为我的网站制作的一个例子。

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

您可以暂时为其设置背景颜色，以便您可以清楚地了解它在页面上的位置。然后相应地调整边距。

在图像的透明框

3 个答案: