廣場背景DIV

Question

所以，我的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> 

我想達到的效果是讓格顏色完全相同的大小，因爲它背後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

我會做幾件事情。首先，刪除您設置的靜態高度/寬度。讓容器從圖像中繼承它們。然後，您需要設置僞元素的頂部/左側位置，相對於您的容器的位置（應設置爲相對位置）。 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%; 
    } 
} 

Answer 2

當我做CSS的東西，我通常使用鉻檢查元素來找到該特定的元素，並嘗試改變它的bg顏色，並在CIE的右側看到CSS選項卡，你可以看到哪些類具體實施，所以只需簡單地調用該類你的內部或外部文件，並使用圖像作爲背景，希望它有幫助！

我改變了我們正在處理的當前頁面的顏色，呵呵！

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