0

我很肯定这不能完成，但我想在继续 B 计划之前我会检查一下。我有一张<header>包含照片的照片，可以由左边缘逐渐变为透明的用户随意切换揭示底层颜色或图案的其余部分或任何东西......无论它是什么，它也是用户提供的，所以它可以是任何东西。

为了保留设计，同时允许用户不了解或访问将蒙版应用于他们想要使用的照片的图像编辑器，我试图找到一种方法来使用未经编辑的纹理/颜色以及未经编辑的照片产生以下效果：

在此处输入图像描述

我现在能想到的就是在 Photoshop 中手动将 100% 白色到 0% 白色蒙版应用到照片的左边缘。但就像我说的，这不能由我的目标用户完成 - 我需要他们能够上传新图像并保持图像淡入背景效果。

我已经成功地做到了这一点，其中 2 个元素中的 1 个是带有伪元素的纯色背景，就像在这个 CodePen中一样（非常粗糙 - 仅用于概念证明）。但同样，我需要用户提供的内容或背景.inner和背景.outer（并且可能在响应浏览器事件中更改）。同一个 Pen 还显示了一个使用 -webkit-mask-image而不是伪元素的版本，这使它更接近，但缺乏 IE 支持。

如果没有大量的 SVG 编码（不值得花时间——对于这个用例——来保持可变的背景图案/图像），有没有办法（最好是纯 CSS）来实现这种屏蔽效果而无需编辑任何一个图像？

4

2 回答 2

1

正如@Bryce Howitson 所说，您可以使用mask

.box {
  width:300px;
  height:200px;
  position:relative;
}
.box:before,
.box:after{
   content:"";
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background-image:url(https://picsum.photos/id/2/800/800);
   background-size:cover;
   background-position:center;
}
.box:after {
   background-image:url(https://picsum.photos/id/13/800/800);
   -webkit-mask:linear-gradient(to right,#fff 35%,transparent 70%);
   mask:linear-gradient(to right,#fff 35%,transparent 70%);
}
<div class="box">

</div>

于 2019-10-05T09:14:25.920 回答
0

¯_(ツ)_/¯

如果 IE 支持是一项硬性要求，那么使用纯 CSS 进行屏蔽就很不走运了。您可以简单地转储对 IE 的支持，然后继续，mask-image因为它甚至可以在 MS Edge 中使用。只有您自己的使用情况统计数据才能告诉您这是否是一个好主意。

选项 2

转储第二张图像并使用主图像的渐变叠加到纯色背景。您可能不想这样做，但它是一个不错的渐进增强选项。

选项 3

它的工作量很大，但您可以使用CanvasJavascript 来伪造它。基本思想是将主图像分割成单独的画布元素。图像的每个像素宽一个元素，然后使用正确的偏移量将源图像绘制到画布元素中。然后切片在画布中并排堆叠，重新制作完整图像。此时，您可以更改每个切片的不透明度，直到获得渐变淡入淡出效果。

例如，如果图像向右侧淡出，最右边的切片是 0% 不透明，紧挨着左边的是 1%，然后是 2%，以此类推

这是未经测试的，但是除了这之外，沿着这些路线的一些东西从左不透明到右透明均匀地消失：

var theCanvas = document.getElementById('canvasContainer');
fadeImage = theCanvas.getContext('2d');
for (var i = 0; i < sourceImage.width; i++) {
    fadeImage.globalAlpha = (sourceImage.width - i) / sourceImage.width;
    fadeImage.drawImage(sourceImage, i, 0, 1, sourceImage.height, i, 0, 1, sourceImage.height);
}
于 2019-10-05T05:40:19.543 回答