顏色漸變不起作用

Question

我試圖讓一個顏色漸變在我正在構建的網站上爲一組圖像工作，而我什麼都沒有。我想我使用的是正確的代碼，但我認爲我使用的規則是正確的。

這是我目前所面對的 -

styles.css的

.img_holder:before { 
    background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%); 
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%); 

    opacity: 0; 
    z-index: 2; 
    -webkit-transition-property: top, opacity; 
    transition-property: top, opacity; 
    -webkit-transition-duration: 0.3s; 
      transition-duration: 0.3s; 
} 


.img_holder img { 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
} 



.wrapper .img_holder .details { 
    /* font-size: 10px; */ 
    padding: 0px 20px 20px 20px; 
    color: #fff; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    z-index: 3; 
    opacity: 0; 
    transition: .7s ease; 
    background-color: rgba(0,0,0,0.7); 
} 


.img_holder:hover .details { 
    opacity: 4; 
} 

的index.html

 <div class="brick"> 
       <img src="2images/2advertising.jpg"> 
      <div class="details"> 
       <span id="title">Lorem Ipsum Dolor</span> 
       <span id="info">Quisque vel felis lectus donec vitae dapibus magna</span> 
        </div> 
      </div> 

目前的圖像看起來就像這樣 -

我希望背景顏色淡入圖像而不是停在文本的頂部。我在其他例子中看到了這一點，但似乎無法複製它。任何幫助讚賞

Answer 1

道歉，如果我沒有正確的格式，第一次應答。

這是我認爲你所要求的。只是使用一些漸變和不透明的玩法將背景淡化爲無。

<div class="card"> 
    <img src="http://placekitten.com/250/350" alt=""> 
    <div class="card__caption"> 
     <span class="card__caption__title">Lorem Ipsum</span> 
     <span class="card__caption__body">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</span> 
    </div> 
</div> 

.card { 
    position: relative; 
    width: 250px; 
} 

.card__caption { 
    position: absolute; 
    bottom: 0; 
    padding: 40px 20px 20px 20px; 
    background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,0)); 
} 

.card__caption__title, 
.card__caption__body { 
    display: block; 
    color: white; 
} 

.card__caption__title { 
    font-size: 1.4em; 
} 

下面是一個例子的筆：https://codepen.io/andrewchar/pen/MEXYza?editors=1100

Answer 2

嘗試將梯度放置在圖像上而不是文本容器。

.darken { 
    background-image: 
    linear-gradient(
     rgba(0, 0, 0, 0.5), 
     rgba(0, 0, 0, 0.5) 
    ), 
    url(shoes.jpg); 
} 

見。 https://css-tricks.com/design-considerations-text-images/

Answer 3

有很多錯誤的/在你的代碼缺陷：

opacity: 0使得該元素完全透明/不可見，不論其背景設定

的4不透明度值不存在

在您的html代碼中沒有.img_holder類的元素

您的H中沒有.wrapper類TML代碼

如果最後一條css規則是作爲倒數第二個的懸停類，它需要相同的特定性：從倒數第二條規則中刪除.wrapper類。

一個:before元件需要更多的設置，通常它由具有position: absolute和適當的位置和大小的設置涉及主要元件，並且主元件需要position: relative對於絕對定位工作

HM。

我希望我在我的代碼片段中所做的一定程度上會對您有所幫助。至少有一個漸變背景和懸停在圖像褪色中的元素...

.img_holder { 
 
    background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%); 
 
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%); 
 
    opacity: 1; 
 
    z-index: 2; 
 
    -webkit-transition-property: top, opacity; 
 
    transition-property: top, opacity; 
 
    -webkit-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
    border: 1px solid red; 
 
} 
 

 
.img_holder img { 
 
    backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
} 
 

 
.img_holder .details { 
 
    /* font-size: 10px; */ 
 
    padding: 0px 20px 20px 20px; 
 
    color: #fff; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 3; 
 
    opacity: 0; 
 
    transition: .7s ease; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
} 
 

 
.img_holder:hover .details { 
 
    opacity: 1; 
 
}

<div class="brick img_holder"> 
 
    <img src="2images/2advertising.jpg"> 
 
    <div class="details"> 
 
    <span id="title">Lorem Ipsum Dolor</span> 
 
    <span id="info">Quisque vel felis lectus donec vitae dapibus magna</span> 
 
    </div> 
 
</div>