颜色渐变不起作用

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>