在图像上应用线性渐变的最佳方法是什么?

Question

我试图通过线性渐变使底部的图像略暗，但我无法让它工作。我不确定我做错了什么。

我尝试在 css 中使用::after，就像我在其他网站上看到的那样，我尝试使用 ID，我尝试直接在 css 中使用"背景图像"，但我似乎无法让它工作。我还尝试使渐变仅影响图像，整个部分，整篇文章，但仍然不起作用。我不知道还能尝试什么。

.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>

Answer 1

你可以考虑mix-blend-mode：

mix-blend-modeCSS 属性设置元素的内容应如何与元素父级的内容和元素的背景混合。

此外，将选择器从类.修复为 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>

Answer 2

您正在尝试选择带有"系列"class元素。它本身的HTML元素具有"Series"的id，因此渐变实际上无法到达此元素。

将.Series替换为#Series，或将id="Series"替换为class="Series"。

Answer 3

您的问题的答案是您使用白色作为渐变色，所以我只更改了您的颜色代码来解决问题。这是小提琴修复的链接 小提琴链接

<section id="Series">
<img class="imgshadow" src="https://content.fortune.com/wp-content/uploads/2015/02/0ahuznqcmgooafcr7vfc1p9oc9r45f84l1uj4mit2smcopfaxr0gatttneqwlqk-dnbb_eyklizhxhv1dgnj0c.jpg" width="240">
<div class="texto1">text</div>
<h1 class="subtext1">text</h1>
</section>

.CSS

#Series {
background-color: transparent;
background-image:  -webkit-linear-gradient(-270deg, rgba(23, 22, 22, 0.39), rgba(255, 255, 255, 0) 100%);
background-image: linear-gradien(-270deg, rgba(23, 22, 22, 0.39), rgba(255, 255, 255, 0) 100%);
position:relative;
}
.texto1{
position:absolute;
z-index:99999;
top:0px;
}
.imgshadow{
mix-blend-mode: overlay
}
.subtext1{
position:absolute;
z-index:99999;
top:10px; 
}

Answer 4

css 的 ID 选择器是 '#' 而不是 '.';

尝试使用 #Series { ... }