css - 单独在背景图像上的 compass 过渡不透明度

Question

我想在悬停时将背景图像设为 50% 不透明，并让页面上的所有其他元素保持原样。这是我的 SASS:

.background {
  div {
    @include background(image-url("background.jpg"));
    padding-bottom: 68.53%;
    @include transition-property(opacity);
    @include transition-duration(2s);
    @include transition-timing-function(ease-in);
    &:hover {
      opacity: 0.5;
    }
  }

  #cover {
    @include background-size(cover);
  }
}

.intro {
  width: 100%;
  position: absolute;
  margin-top: 100px;
  left: 20%;
  padding-left: 10px;
  max-width: 650px;
}

h2.intro {
  font-size: 3.5em;
}

这是 html:

<div class="intro">
  <h2 class="intro">Introduction</h2>
</div>
<div id="anchor">
  <div class="background">
    <div id="cover">&nbsp;</div>
  </div>
</div>

目前过渡本身效果很好，但当我想单独将不透明度应用于背景图像时，它也会使“Introduction”变得不透明。我究竟做错了什么？

Answer 1

这最终解决了它。 SASS:

#intro {
  div {
    @include background(image-url("nathanstudio.jpg"));
    padding-bottom: 68.53%;
  }

  #cover {
    @include background-size(cover);
  }

  @include transition-property(opacity);
  @include transition-duration(2s);
  @include transition-timing-function(ease-in);
  &:hover {
    opacity: 0.5;
  }
}

h2#intro {
    position: absolute;
    top: 20%;
    left: 10%;
    margin: 0;
    font-size: 3.5em;
    text-shadow: 2px 2px 0px #000000;
}

和 HTML:

<div id="intro">
    <div id="cover">&nbsp;</div>
</div>
<h2 id="intro">Composer<br>Sound Designer</h2>

因此，问题在于将您不想转换的内容保留在您要转换的内容的 div 之外，然后定位这些内容，以便它们到达您想要的位置。现在看起来很简单 ;)