html - 如何使用 CSS 为 div 中的背景图像和文本设置不同的过渡效果

Question

我正在尝试实现像本网站的 img/链接中那样的过渡效果:verena michelitsch .

这是我到目前为止尝试过的:

HTML:

<div id="centerpiece">
  <div id="photography"><a href="photography.html">Photography</a></div>
  <div id="painting"><a href="painting.html">Paintings</a></div>
  <div id="sketches"><a href="sketches.html">Sketches</a></div>
  <div id="digitalpainting"><a href="digitalpainting.html">Digital Paintings</a></div>
</div>

CSS:

#centerpiece div {

    border: 10px solid gray;
    border-radius: 100%;
    background-image: url(images/viraj.jpg);
    line-height: 300px;
    text-align: center;
    vertical-align: middle;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;

}

#centerpiece div a {
    display: block;/*to extend to div boundary*/
    height: 300px;
    border-radius: 100%;
    font-family: Existence Light, Aaargh, Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 700;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
}

#centerpiece div:hover {
    opacity: 0.5;
}

#centerpiece div a:hover {
    opacity: 1;
}

虽然文本发生了转换(在 a 元素内)，但它是 opacity属性最终设置为 0.5 而不是 1，尽管它应该像我为 #centerpiece div a 编写的 CSS 规则一样在 #centerpiece div 之后.

怎样才能做出最后的opacity等于 1 ?

Answer 1

您在悬停时将 opacity 的 #centerpiece div 设置为 0.5，它是您的 a 标签的父标签。父级上的 opacity 会影响其子级，因此当您在 1 上调用 #centerpiece div a 时，它仍然从其父级继承 opacity: 0.5。您可以将 #centerpiece div 设置为 0.5，然后增加到 1。或者您可以使用 rgba(尽管如果您有图像，rgba 不会影响不透明度)

FIDDLE

更新

鉴于您当前的 fiddle ，这是一种更有效的方法:

HTML

<div class="container">
  <div class="overlay"><a href="#">Photography</a></div>
</div>

CSS

.container{
  background: url("http://www.placecage.com/400/200") no-repeat;
  width: 400px;
  height: 200px;
}

.container:hover .overlay{
  opacity: 1
}

.overlay{
  opacity: 0;
  background: rgba(255,255,255,.8);
  width: 100%;
  height: 100%;
  text-align: center;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

a{
  display: inline-block;
  font-family: "Arial";
  font-size: 24px;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  line-height: 200px;      
}

2nd FIDDLE

新更新

您在 their 示例中看到的不是您的想法。如果你检查他们的代码，你会发现他们根本没有淡出背景，他们正在使用内联样式(这似乎是动态的，可能来自数据库)添加一种颜色，由于 rgba ，以低不透明度匹配每个图像。因此，如果我不得不猜测，我会说当他们上传图像时，他们还会添加一个颜色十六进制，然后将其用作叠加层。 (我检查了它们的叠加层，不仅它们都是内联的，这通常是动态代码的标志，而且颜色都不同)。在这个最新的 fiddle 中，你会看到我做了你想要的。当你悬停时背景变淡，但结果与我的第二个 fiddle 相似，但仍然可能不是你期望的那样:

3rd FIDDLE

为了证明我所说的，我拿了他们的图像和他们用于这幅图像的颜色，并在我的 fiddle 中重新创建了它。我所要做的就是交换图像和我用于 .overlay 背景的颜色(来自 fiddle 2):

RECREATION FIDDLE