Question

我正在尝试将鼠标悬停在此页面上的图像上时显示：

我不知道我哪里出错了，因为这没什么。我希望叠加层从图像的两侧有一些填充，当网站调整大小时，它也会继续。

.photo-gallery div {
  display: inline-block;
  margin: 1%;
  width: 31%;
  position: relative;
}
.photo-gallery div a {
  line-height: 0;
  display: block;
}
.overlay {
  position: absolute;
  z-index: 200;
  width: 90%;
  height: 90%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.7);
}
.photo-gallery div a:hover .overlay {
  display: block;
}

Answer 1

＆＃13;

netstat

＆＃13;

Answer 2

一种可能的解决方案是设置黑色背景并在悬停时更改图像的不透明度

＆＃13;

192.168.178.87

＆＃13;

192.168.178.131

＆＃13;

Answer 3

您可以在'a'元素中使用黑色背景，然后在悬停时为图像添加不透明度。

这样的事情：


npm ls broccoli-uglify-sourcemap

Answer 4

在这种情况下，你可以在悬停时将假背景应用于after伪选择器。除了与容器的垂直对齐之外，不需要对图像进行样式化以实现此目的。

a {
  display:inline-block;
  position: relative;
}

a:hover:after {
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
}

a img {
  vertical-align: middle;
}

<a href="#">
  <img src="http://www.samanthamakeup.tv/_img/_photo-gallery/gallery-02.jpg"/>
</a>

Answer 5

相同的解决方案

.section-3::after{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: .7;
	background:black;
	z-index: 1;
}

.section-3{
	position: relative;
	z-index: 2;
	padding: 20px 20px;
}

h1{
position: relative;
	z-index: 2;
	color:red;
}

<div class="section-3">
  <h1>Hello i am text !</h1>
</div>

使用此代码来应用叠加层。

CSS图像叠加不起作用

5 个答案: