Question

我正在尝试使用线性渐变使图像的底部稍微更暗些，但是我无法使其正常工作。我不确定自己在做什么错。

我尝试在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>

Answer 1

您可以考虑使用mix-blend-mode：

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

另外，将选择器从类.更改为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元素的id为“系列”，因此渐变实际上无法到达该元素。

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

Answer 3

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

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

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

4 个答案: