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>

目前，过渡本身运作良好，但它也使得＃34;简介＆＃34;不透明，当我想将不透明度单独应用于背景图像时。我究竟做错了什么？

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>

所以这是一个问题，就是要保留你不想在你所做的东西之外转换的东西，然后定位东西，让它们去你想去的地方。现在看似简单;）

仅在背景图像上的指南针过渡不透明度

1 个答案: