Question

我目前在div中使用图片标记来显示网站标题。出现了一个新的功能要求，要求我们使用不同的光源保留同一图像的几个不同版本，然后在标题的左侧显示一个图像，并向右侧的另一个图像进行软转换。如果我们可以使用3个或更多图像，那就更好了。

下面的示例是使用我的旧3D渲染。想象一下，我们有一个日落图像，一个日间图像，并希望使用除了它们和CSS之外的任何内容创建下面的图像。如果您想在小提琴中使用它们，可以在以下地址找到原始图像：

对于那些看不到示例并需要进一步说明的人：图像都是800像素宽。最终结果应该是800像素宽的图像。结果图像的左边应该是图像-1，右边应该是图像-2，并且在中心它们应该是淡入淡出。我希望CSS背景图像和线性渐变能以某种方式实现这一点，但我的搜索结果奇怪地显示为空。这有可能用CSS吗？

Answer 1

使用蒙版图像（支持率非常低）的解决方案

.base {
  width: 600px;
  height: 400px;
  position: relative;
  background-image: url(https://i.stack.imgur.com/0bIJu.jpg);
  background-size: cover;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url(https://i.stack.imgur.com/ohVd6.jpg);
  background-size: cover;
  -webkit-mask-image: linear-gradient(to left, transparent, white);
}

<div class="base"><div class="overlay"></div></div>

另一种使用混合模式的解决方案。在大多数现代浏览器中都支持这个。（通常除了Edge）。我在悬停时添加了一个动画。

我认为可能存在一个涉及伽玛计算的轻微问题，有些地方的结果比它应该更暗。我试图修复它使渐变更轻。

.container {
  width: 600px;
  height: 400px;
  position: relative;
}

.container div {
  width: 100%;
  height: 100%;
  position: absolute;
}

.container:hover div {
  animation: slide 6s infinite;
}

.image1 {
  background-image: linear-gradient(to right, black 33%, #444 40%,#ddd 60%, white 66%), url(https://i.stack.imgur.com/0bIJu.jpg);
  background-size: 300% 100%, cover;
  background-position: center center, center center;
  background-blend-mode: multiply;
}

.image2 { 
  background-image: linear-gradient(to left, black 33%, #444 40%,#ddd 60%,white 66%), url(https://i.stack.imgur.com/ohVd6.jpg);
  background-size: 300% 100%, cover;
  background-position: center center, center center;
  background-blend-mode: multiply;
  mix-blend-mode: screen;
}
@keyframes slide {
  from  {  background-position: left center, center center;
        }
  to {background-position: right center, center center;}
}

<div class="container">
  <div class="image1">
  </div>
  <div class="image2">
  </div>
</div>

Answer 2

mask-image是您问题的解决方案，但目前仅支持webkit

如果您想要跨浏览器解决方案，我建议您使用SVG

CSS可以允许从一个图像到另一个图像的渐变过渡吗？

2 个答案: