Question

我试图在CSS样式表中使用此代码：

.layered-image {
   background: linear-gradient( to right, transparent, white 40% ),
       url("http://www.azlro.org/chad/images/IMG_3699-1920x1080.JPG");
}

...将背景图像从图像本身淡化为从左到右的白色。但是，我想要一些图像（500像素）根本不褪色然后从那里开始淡出。那可能吗？

Answer 1

这可以通过使用::before选择器来实现 :: before选择器在每个选定元素的内容之前插入一些东西，在你的例子中，是线性渐变'layer'。

我不完全确定这是你所追求的，但希望这将指导您为您的项目提供解决方案。你将不得不玩弄不透明度，宽度和可能的其他因素，以获得你想要的。

正如上述评论者建议的那样，您可以为线性渐变中的每种颜色添加值，以确定要保留的数量，例如：

线性渐变（向右，透明 500px ，白色）;

html, body {
  width: 100%;
  height: 100%;
}

.layered-image {
  width: 100%;
  height: 100%;
  background: url('https://upload.wikimedia.org/wikipedia/commons/6/62/Starsinthesky.jpg') center center   no-repeat;
  background-size: cover;
}
  
.layered-image:before {
   content: '';
   position: absolute;
   background-image: linear-gradient(to right, transparent, white);
   opacity: 2.5; 
   height:100%;
   width:100%;
 }

<div class="layered-image">
</div>

Answer 2

使用不透明度：

.layered-image {
     opacity:0.8;
}

Answer 3

只需调整渐变：

＆＃13;

.layered-image {
  height: 200px;
  background: linear-gradient( to right, transparent 0,transparent 200px /*edit this value*/ ,white 60%), 
  
  url("https://lorempixel.com/1000/800/") center/cover;
}

＆＃13;

<div class="layered-image">
</div>

＆＃13;

只使用CSS样式表将背景的一部分淡化为白色

3 个答案: