Question

我有这种情况并没有按照预期的方式运作：

＆＃13;

deactivate audio session

＆＃13;

.work-container {
  width: 100%;
  position: relative;
}

img {
  width: 100%;
  height: auto;
}

.overlay-info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
  background: #eee;
}

.overlay-info:hover {
  opacity: .75;
}

.go-to {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

＆＃13;

当鼠标悬停在图片上时，<div class="work-container"> <img src="http://lorempixel.com/320/240" class="img-responsive"> <div class="overlay-info"> <div class="go-to"> <button type="button" class="btn btn-secondary">Secondary</button> </div> </div> </div> div会获得.overlay-info的{{1}}（从opacity开始），但我希望{ {1}} .75 0。有什么想法吗？

Answer 1

你应该使用rgba代替不透明度，如果使用不透明度，设置不透明度的元素的子元素将继承

图像悬停叠加：处理嵌套元素的不透明度

1 个答案: