Question

我有一个<div id='a'>，当它悬停在其父元素上时会变得透明。但div的内容应该是不透明的。代码如下：

.changer{        
    background-color: gray;
    opacity:0;
    display: block;
    transition: .5s ease;
    backface-visibility: hidden;
}

.mb-4:hover .changer{
    opacity: 0.6;
}

<a href="#" class="d-block mb-4">
    <div id="a" class="changer d-inline">The text that must be non-transparent</div>
    <img class="img-fluid img-thumbnail" src="images/barcelona.jpg" alt="">  <!--this element is not very important-->
</a>

Answer 1

使用背景颜色来执行此操作如果你想让div半透明并且背景为白色，那么你需要以下代码：

background: rgba(255,255,255,0.6);

这里需要使用rgb值，最后0.6值是不透明度级别，（255,255,255）是白色的颜色代码，您可以通过更改值来制作任何颜色。

删除背景颜色和不透明度属性

Answer 2

使用CSS3的背景不透明度来改变div / img / whatever背景的可见度，而不会影响其中的内容。

.inner {
  color: black;
  background: rgba(128, 0, 128, 0.25);
  transition: .5s ease;
  height: 3em;
}

.outer:hover .inner {
  background: rgba(128, 0, 128, 0.75);
  height: 4em;
}

.outer .inner div {
  width: 10em;
  height: 2em;
  background: gray;
}

a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

<a href="#" class="outer">
  <div class="inner">
    <div>Hover over me</div>
  </div>
</a>

修改

修改后的代码段，以证明内部div对外部div的更改完全不受影响。

编辑2

要更改文本的透明度：

.inner { background: rgba(128, 128, 128, 0); color: rgba(0, 0, 0, 0); transition: .5s ease; } .outer:hover .inner { background: rgba(128, 128, 128, 1); color: rgba(0, 0, 0, 1); /* alternative: change the text color itself instead of changing opacity */ } a, a:visited, a:hover, a:active { text-decoration: none; }

<a href="#" class="outer"> <div class="inner">Hover over me</div> </a>

使div项目透明，在悬停时使用不透明的内容

2 个答案: