Question

所以，我有这样的img里面的img：

<div class="row text-center about__gallery">
  <div class="col-xs-12 col-sm-4">
    <div class="about__gallery--first img">
      <img />
    </div>
  </div>
   .
   .
   .
</div>

我想要达到的效果是让div的颜色与img背后的img完全相同（在悬停时我会稍微移动img）。 SCSS看起来像这样：

.about__gallery{
  margin-top: 5%;
  .img{
    background-repeat:no-repeat;
    background-size:cover;
    width:70%;
    height:230px;
    margin-bottom: 15%;
    img{
      z-index: 3;
    }
    &:before {
      position: absolute;
      content: " ";
      display: block;
      width: 70%;
      height: 230px;
      background-color: $color-blue;
      z-index: -100;
    }
  }
  .about__gallery--first{
    margin-left: 45%;
    img{
      content:url("../img/aboutus_pic1.png");
      width: 100%;
    }
  }
  .
  .

不幸的是，结果看起来像这样：因为声誉而被删除

使用完整代码进行编辑：

<div class="row text-center about__gallery">
  <div class="col-xs-12 col-sm-4">
    <div class="about__gallery--first img">
      <img class="about__gallery__img--bg" />
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="about__gallery--second img">
      <img class="about__gallery__img--bg" />
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="about__gallery--third img">
      <img class="about__gallery__img--bg" />
    </div>
  </div>
</div>

我的完整.scss看起来像这样：

.about__gallery{
margin-top: 5%;
margin-bottom: 10%;
.img {
    position: relative;
    margin-bottom: 15%;
    img {
        width: 100%;
        height: auto;
    }
    &:before {
      position: absolute;
      top: 0;
      left: 0;
      content: " ";
      display: block;
      width: 100%;
      height: 100%;
      background-color: $color-blue;
      z-index: -100;
    }
}

.about__gallery--first{
     margin-left: 45%;
     margin-bottom: auto;
     img.about__gallery__img--bg{
       content:url("../img/aboutus_pic1.png");
       width: 100%;
     }
   }
   .about__gallery--second{
     margin:auto;
     img.about__gallery__img--bg{
       content:url("../img/aboutus_pic2.png");
       width: 100%;
     }
   }
   .about__gallery--third{
     margin-left: -15%;
     margin-bottom: auto;
     img.about__gallery__img--bg{
       content:url("../img/aboutus_pic3.png");
       width: 100%;
     }
   }
   }

现在我的页面看起来像这样：RESULT

我的目标是在我的网站上提供类似的内容：GOAL

添加了不起作用的悬停........ codepen.io/Kreha/pen/vmbzPb

Answer 1

当我做css的东西时，我通常使用Chrome Inspect Element找到该特定元素并尝试更改它的bg颜色，在CIE的右侧看css选项卡，在那里你可以看到哪个类特别受影响所以只需调用您的内部或外部文件中的该类，并使用图像作为背景，希望它有所帮助！

我改变了我们正在处理的当前页面的bg颜色，呵呵！

.so-header~.container {
background-color: #ccc;
}

Answer 2

我会做的一些事情。首先，删除已设置的静态高度/宽度。让容器从图像继承它们。然后，您需要设置伪元素的顶部/左侧位置，相对于容器的位置（应设置为相对位置）。 Here's a working example

<div class="row text-center about__gallery">
    <div class="col-xs-12 col-sm-4">
        <div class="about__gallery--first img">
            <img src="http://placehold.it/250x250" />
        </div>
    </div>
</div>

.about__gallery {
    margin-top: 5%;

    .img {
        position: relative;
        margin-bottom: 15%;

        img {
            opacity: 0.8; // just to show the blue behind it
            width: 100%; 
            height: auto;
        }

        &:before {
            position: absolute;
            top: 0;
            left: 0;
            content: " ";
            display: block;
            width: 100%;
            height: 100%;
            background-color: $color-blue;
            z-index: -100;
        }
    }

    &--first {
        margin-left: 45%;
    }
}

将背景放在div后面的背景

2 个答案: