颜色渐变不起作用
我试图让一个颜色渐变在我正在构建的网站上为一组图像工作,而我什么都没有。我想我使用的是正确的代码,但我认为我使用的规则是正确的。颜色渐变不起作用
这是我目前所面对的 -
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>
目前的图像看起来就像这样 -
我希望背景颜色淡入图像而不是停在文本的顶部。我在其他例子中看到了这一点,但似乎无法复制它。任何帮助赞赏
道歉,如果我没有正确的格式,第一次应答。
这是我认为你所要求的。只是使用一些渐变和不透明的玩法将背景淡化为无。
<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
尝试将梯度放置在图像上而不是文本容器。
.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/
有很多错误的/在你的代码缺陷:
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>
你是对的,道歉。现在已经很晚了,我正在努力提出这个问题,但最终只是在偷工减料。感谢这样一个详细的答案。 –
谢谢你。如何让文字周围的区域变暗,我是否调整不透明度和颜色代码? –
,因为第一个rgba我已经在.9不透明度,你不能去任何黑暗,除非你只是删除任何不透明。您可以将代码更改为'background:linear-gradient(顶部,rgb(0,0,0)50%,rgba(0,0,0,0));'这会使它变暗并开始上半部分。你可以玩50%来设置你想要开始消失的地方。 – Andrew