Question

我添加了黑色透明度，当它们悬停在我网站上的背景图片上时会显示。我有一个h2标签，它也出现在悬停，但坐在黑暗的透明度后面，我想要它在它上面！有解决方案吗？

<div class="img-option"> 
    <div class="content"> 
        <h2>example<\h2> 
    <\div>
<\div>

CSS：

.img-option 
Background image Position relative Background repeat no repeat Background Size cover .img-option:hover Filter: brightness (.6)

由于

Answer 1

＆＃13;

.img-option {
  background-image: url(https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg);
  position: absolute;
  height: 200px;
  width: 400px;
}

.img-option:after,
h2:before {
  position: absolute;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}

.img-option:after {
  content: '';
  opacity: 0;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
}

h2:before {
  content: attr(data-content);
  top: 60%;
  z-index: 1;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 2% 3%;
  border: solid #000000 1px;
  background-color: #ffffff;
}

.img-option:hover:after {
  opacity: 1;
}

＆＃13;

<div class="img-option">
  <div class="content">
    <h2 data-content="example"></h2>
  </div>
</div>

＆＃13;

Answer 2

您需要为<h2>元素分配z-index。

z-index: 1;

您可以找到有关z-index属性here的更多信息。

Answer 3

添加.img-option:before元素并添加样式position:absolute并调整高度，如下所示。

<强>样本： -

.img-option {
  overflow: hidden;
}

.img-option h2 {
  margin: 0;
  padding: 20px;
}

.img-option:before {
    content: '\00a0';
    font-size: 1.5em;
    width: 100%;
    z-index: 100;
    padding: 20px;
    overflow: hidden;
    position: absolute;
    opacity: 0;
    overflow: visible;
    box-sizing: border-box;
    transition: all 0.4s ease-in-out;
    position: absolute;
}

.img-option:hover:before {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.7);
}

<div class="img-option">
  <div class="content">
    <h2>example</h2>
  </div>
</div>

悬停效果对背景图像

3 个答案: