我试图通过线性渐变使图像底部稍微暗一些,但我无法让它工作。我不确定我做错了什么。
我尝试在 css 中使用 ::after
,就像我在其他网站上看到的那样,我尝试使用 ID,我尝试在 css 中直接使用 `background-image`` 但我做不到似乎让它工作。我也试过让渐变只影响图像、整个部分、整篇文章,但仍然不起作用。我不知道还能尝试什么。
.Series {
background-color: transparent;
background-image: -webkit-linear-gradient(-270deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}
<section id="Series">
<img class="imgshadow" src="cara2.jpg" width="240">
<div class="texto1">text</div>
<h1 class="subtext1">text</h1>
</section>
最佳答案
你可以考虑mix-blend-mode
:
The
mix-blend-mode
CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
此外,将您的选择器从类 .
修改为 id #
。
#Series {
background-color: transparent;
background-image: -webkit-linear-gradient(-270deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}
img {
mix-blend-mode: overlay
}
body {
background: purple
}
<section id="Series">
<img class="imgshadow" src="http://dummyimage.com/200/0df" width="240">
<div class="texto1">text</div>
<h1 class="subtext1">text</h1>
</section>
关于html - 在图像上应用线性渐变的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58067553/