我有一些包含图像和文字的弹性框。
.bItem {
display: flex;
display: block;
justify-content: flex-end;
flex-direction: column;
position: absolute;
top: 0;
right: 9px;
bottom: 0;
left: 9px;
padding: 18px;
background-size: cover;
background-position: center center;
}
HTML:
<div class="box">
<a class="bItem" href="/about/" style="background-image:url(/images/one.jpg);" >
<div class="bText white">
<h3>TITLE</h3>
Additional text here.</div>
</a>
</div>
我假设这样的事情,附在.bItem
上会起作用:
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
有没有办法可以将它附加到.bItem
,最好不需要添加其他类?
我遇到的问题是文字难以阅读,白色文字,底部渐变为黑色有助于使其更清晰。
答案 0 :(得分:2)
您不能在同一元素上同时使用渐变和背景图像,因为两者都是background-image
。但是您可以将渐变分配给.bItem
的伪元素,因此您不必为其添加其他元素。此外,您可以使用transparent
和black
代替rgba()
.bItem {
display: flex;
justify-content: flex-end;
flex-direction: column;
position: absolute;
top: 0;
right: 9px;
bottom: 0;
left: 9px;
padding: 18px;
background-size: cover;
background-position: center center;
background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);
}
.bItem:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 0%, black 100%);
}
<div class="box">
<a class="bItem" href="/about/">
<div class="bText white">
<h3>TITLE</h3> Additional text here.</div>
</a>
</div>
答案 1 :(得分:0)
锚标记是内联的。您只能将背景应用于块。因此,您可以将显示类型更改为“阻止”。这可能会导致其他问题,但从那里开始。
答案 2 :(得分:0)
我不知道这是否是您正在寻找的内容,但这里是您如何在文字上制作渐变。
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
答案 3 :(得分:0)
不要将渐变应用于锚标记。创建另一个类以将线性渐变应用于背景容器,其中包含一行:
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), url(/images/one.jpg);
这将允许渐变仅应用于背景图像,同时允许文本保持不受影响。然后,您可以单独设置文本和锚标签的样式。
答案 4 :(得分:0)
如果您想在图像上线性渐变,您可以将背景颜色添加到 div 类并降低图像不透明度。
<div class="col"> \\set background color for col class in
<img src="" alt=""> \\now set opacity for img in css
</div>