Question

我在使用CSS方面遇到了一些麻烦。

我有代码（示例）：

<div class="background" style="background: url(sample.jpg) no-repeat;">
    <div class="text-title">Title</div>
    <div class="text">Random stuff</div>
</div>

我想要做的是，当悬停在这个背景图像上时 - 它应该变得不透明，让我们说0.3，但如何制作，内部项目将保持相同的不透明度1？

Answer 1

您可以使用伪元素。

<div class="background">
    <div class="text-title">Title</div>
    <div class="text">Random stuff</div>
</div>

.background {
    position: relative;
    background-color: yellow; /* added for illustrative purposes */
    min-height: 150px; /* added for illustrative purposes */
}
.background:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.3;
    background-image: url('http://lorempixel.com/output/abstract-q-c-640-480-3.jpg');
    background-repeat: no-repeat;
}

jsFiddle：http://jsfiddle.net/3kbf5p5x/

Answer 2

这是本书中最好的伎俩。 https://jsfiddle.net/xbxvr8as/

如果你在使用CSS时遇到麻烦，那么这可能会让你的大脑弯曲，但是jsfiddle就像你可以得到它一样。通过删除单个样式来玩它，看看会发生什么。

关键是relative:position你的元素。然后你可以添加一个＆＃34;假装＆＃34;使用:after伪元素的额外div类似的东西。你给这个伪元素一堆属性 - 最重要的可能是position:absolute，它允许它直接坐在文本下面。

HTML

<div id="a">
    some stuff in here .....
</div>

CSS

#a{position:relative}
#a:after{
    content:" ";
    position:absolute;
    display:block;
    top:0;left:0;right:0;bottom:0;
    background-color:#f00;
    z-index:-1;
    opacity:0.2;
}

Answer 3

您可以将背景放在外部元素中绝对定位的元素上，然后单独控制其不透明度：

<div style="position: relative">
    <div class="background" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(sample.jpg) no-repeat;">
    </div>
    <div class="text-title">Title</div>
    <div class="text">Random stuff</div>
</div>

请注意，为此，我们必须通过position: relative将其容器定位。

直播示例：

body, html {
  height: 100%;
}
.outer {
  width: 100%;
  height: 100%;
}
.background {
  opacity: 0.5;
}

<div class="outer" style="position: relative">
  <div class="background" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(http://onlyfreewallpaper.com/download/sea-coast-night-sky-stars-milky-way-1024x768.jpg) no-repeat;">
  </div>
  <div class="text-title">Title</div>
  <div class="text">Random stuff</div>
</div>

仅背景不透明度

3 个答案: