mix-blend_使用CSS mix-blend-mode获得更好的产品图片

mix-blend

Visualizing products with multiple options is always challenging: customers expect to view every variation of their purchase, but making those options available usually involves a lot of PhotoShop work, multiple images, and custom JavaScript.

可视化具有多个选项的产品始终是一项挑战：客户希望查看所购买商品的每一种变化，但要使这些选项可用通常会涉及许多PhotoShop工作，多个图像和自定义JavaScript。

mix-blend-mode is the equivalent of background-blend-mode for arbitrary HTML elements: it controls how a layer affects the appearance of elements underneath it, using the principles of Adobe’s Blend modes. I’ll share much more information about mix-blend-mode in future articles, but I thought a practical demonstration using progressive enhancement principles would be a good place to start.

mix-blend-mode等效于任意HTML元素的background-blend-mode ：它使用Adobe的Blend模式的原理，控制图层如何影响其下方元素的外观。 我将在以后的文章中分享有关mix-blend-mode更多信息，但是我认为使用渐进增强原理进行实际演示将是一个不错的起点。

Let’s use a fashion photograph as an example. The pinstripe suit shown might have three color options: ivory (the default), blue and charcoal.  The basic markup would look something like this:

让我们以时尚照片为例。 显示的细条纹西服可能具有三种颜色选择：象牙色(默认)，蓝色和木炭色。 基本标记如下所示：

<div id="suit">
	<section>
      	<h1>The Modern Pinstripe</h1>
	</section>
	<p id="coloroptions">Available in:
	<span data-value="#00f">Blue</span>
	<span data-value="#fff">Ivory</span>
	<span data-value="#333">Charcoal</span>
</div>

We’ll come to the <span> elements and data attributes in a moment. For right now, it’s worthwhile to note that a good rule of thumb for progressive enhancement is that the DOM will validate both before and after we apply any JavaScript.

稍后我们将介绍<span>元素和data attributes 。 就目前而言，值得注意的是，逐步增强的一个好的经验法则是，DOM将在我们应用任何JavaScript 之前和之后都进行验证。

I’m placing the image in a <section> background for slightly easier layering and scaling, although it could readily be a real image:

我将图像放置在<section>背景中，以便稍微轻松地进行分层和缩放，尽管它​​很可能是真实图像：

#suit {
	position: relative;
	padding-top: 70%;
	background-image: url(modern-pinstripe.jpg);
	background-size: contain;
}

background-size: contain ensures that the background image always fills the available space without being stretched; padding-top is used to make sure that the <section> is the correct aspect ratio to contain the image and the SVG we’re about to add.

background-size: contain可确保背景图像始终填充可用空间而不会被拉伸； padding-top用于确保<section>是正确的宽高比，以包含要添加的图像和SVG 。

按数字绘画 (Painting By Numbers)

The first step to making the color overlay is the same process that we would use to retouch the photograph: create a selection. I used the magnetic lasso in PhotoShop and touched up the result using Quick Mask, but there are many possible methods.

进行彩色覆盖的第一步是与修饰照片相同的过程：创建选区。 我在PhotoShop中使用了磁性套索，并使用“快速蒙版”修饰了结果，但是有很多可能的方法。

Once the selection is complete, I saved it as a path in PhotoShop and copied it into Illustrator as a Compound Path, using an Artboard with the same dimensions as the original image.  Exporting the result as SVG will give me a result that looks something like this:

选择完成后，我使用与原始图像尺寸相同的画板将其保存为PhotoShop中的路径，并将其复制为Illustrator作为复合路径。 将结果导出为SVG将给我一个看起来像这样的结果：

SVG overlay

SVG叠加

The SVG code is placed directly inside the <section>:

SVG代码直接放在<section>内部：

<section>
      <h1>The Modern Pinstripe</h1>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 838" id="suit-overlay">
		<path d="M988.2,603.8c-1-0.4-0.3-0.4-0…. />
	</svg>
</section>

…and then styled using CSS so that the SVG is responsive, but does not display by default:

…然后使用CSS设置样式，以使SVG响应 ，但默认情况下不显示：

#suit svg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	display: none;
}
#suit svg path {
	fill: transparent;
}

This creates our initial conditions: a product image with a description of available colors.

这创建了我们的初始条件：带有可用颜色描述的产品图片。

混合起来 (Mixing It Up)

The SVG overlay matches the area of the suit in the product image, but to recolor the image successfully, we must make the SVG a blending layer:

SVG覆盖层与产品图像中西服的区域匹配，但是要成功为图像重新着色，我们必须使SVG成为混合层：

#suit svg {
      mix-blend-mode: multiply;
}

The image won’t change, as the SVG is still invisible. Let’s change that with some JavaScript at the end of the document:

图像不会改变，因为SVG仍然不可见。 让我们通过文档末尾的一些JavaScript进行更改：

function changecolor() {
	suitpath.style.fill = this.value;
}
function suitstyles(element) {
	element.addEventListener('click', changecolor, false);
}
var suit = document.querySelector("#suit-overlay"),
suitpath = suit.getElementsByTagName("path")[0],
coloroptions = document.querySelectorAll("#coloroptions span"),
supportsBlend = CSS.supports("mix-blend-mode", "multiply");
if (supportsBlend == true) {
	suit.style.display = "block";
	for (var i=0;i<coloroptions.length;i++) {
		var buttonconvert = document.createElement("button");
		buttonconvert.innerHTML = coloroptions[i].innerHTML;
		buttonconvert.value = coloroptions[i].getAttribute("data-value")
		coloroptions[i].parentNode.replaceChild(buttonconvert, coloroptions[i]);
		}
	var buttons = [].slice.call(document.getElementsByTagName("button"));
	buttons.forEach(suitstyles);
}

A quick breakdown of the script, starting with the variables:

从变量开始快速分解脚本：

• suit and suitpath reference the SVG elements on the page.

  西服和西服 路径参考页面上的SVG元素。

• coloroptions collects together all the <span> elements in the product description paragraph.

  coloroptions将产品描述段落中的所有<span>元素收集在一起。

• CSS.supports is the JavaScript equivalent to the CSS @supports rule: it detects if the browser supports mix-blend-mode. If it does, the script sets the SVG to display and converts each of the <span> tags into <button> elements, with the data-value attributes being converted into the value of each button. (If you wanted to be less conservative, as not all browsers yet support @supports, you could skip this condition and create another option for IE users, who do not yet have mix-blend-mode).

  CSS.supports是与CSS @supports规则等效JavaScript：它检测浏览器是否支持mix-blend-mode 。 如果是这样，脚本将设置SVG进行显示，并将每个<span>标记转换为<button>元素 ，并将data-value属性转换为每个按钮的值。 (如果您希望不那么保守，因为并非所有浏览器都支持@supports ，则可以跳过此条件，并为尚未具有mix-blend-mode IE用户创建另一个选项)。

• The new buttons are then collected together, converted into a true JavaScript array, and a click event applied to each, so that when the user clicks on a button the SVG path is color-flooded with the appropriate hexadecimal color.

  然后，将新的按钮收集在一起，转换为真正JavaScript数组，并将click事件应用于每个按钮，以便用户单击按钮时，SVG路径将使用适当的十六进制颜色泛滥。

Using mix-blend-mode allows us to create easy customization of products: if a new color is made available, we just add a <span> with the appropriate data-value to the paragraph. To provide the ultimate in customization, we could provide an HTML5 color input, allowing the customer to select any shade they want.

使用mix-blend-mode可以使我们轻松地定制产品：如果提供了新的颜色，我们只需在段落中添加带有适当data-value的<span>即可。 为了提供最终的定制效果，我们可以提供HTML5颜色输入 ，允许客户选择他们想要的任何阴影。

翻译自: https://thenewcode.com/974/Using-CSS-mix-blend-mode-for-Better-Product-Photos

mix-blend