图片 css 剪切_具有CSS剪切路径，滤镜和混合模式的多层效果

图片 css 剪切

CSS blend modes, clipping paths and filters make a number of effects that were previously available only in PhotoShop possible on the web.

CSS混合模式，剪切路径和滤镜可实现许多以前仅在网上可以在PhotoShop中使用的效果。

One possibility that combines these CSS properties is overlaying images, for before-and-after comparisons or to achieve other visual effects. An example might be the placement of Hugh Jackman’s face over a contemporary photo of Clint Eastwood; particularly effective since both of them possess such similar bone structure and facial features.

合并这些CSS属性的一种可能性是叠加图像，以进行前后比较或实现其他视觉效果。 例如，休·杰克曼(Hugh Jackman)的脸放在克林特·伊斯特伍德(Clint Eastwood)的当代照片上； 特别有效，因为它们都具有类似的骨骼结构和面部特征。

For the first example, the markup looks something like this:

对于第一个示例，标记看起来像这样：

<figure id="eastwood-jackman-blend">
	<img src="eastwood.jpg" alt="Black and white photograph of Clint Eastwood">
	<figcaption>X</figcaption>
	<img src="jackman.jpg" alt="Color photograph of Hugh Jackman">
</figure>

This effectively “sandwiches” a capital X between the two photos. Then, applying the following CSS (in this case, written as Sass):

这实际上将“大写X”夹在两张照片之间。 然后，应用以下CSS(在这种情况下，写为Sass )：

.eastwood-jackman {
	width: 40%
	padding-top: 50%;
	margin: 0;
	img, figcaption { 
		position: absolute;
		top: 0;
	}
	img:last-child {
		mix-blend-mode: multiply;
	}
	figcaption {
		font-family: Futura-CondensedExtraBold;
		font-weight: 400;
		font-size: 45vw
		color: hsla(55,100%,50%,0.8);
		line-height: .77;
		margin-left: 50px; 
	}
}

By placing mix-blend-mode: multiply on the last image, it blends with the yellow “X” and photograph beneath it. As the “X” is a true letter, it is extremely adaptable (and because it uses vw units, responsive); the only problem is that it’s appearance is entirely dependent on the user having that font already installed or embedded. This can never be completely guaranteed, so a better approach might be to clip the upper image. Using much the same markup, for the second example:

通过将mix-blend-mode: multiply在最后一张图像上mix-blend-mode: multiply ，它将与黄色的“ X”混合并在其下方拍照。 因为“ X”是一个真实的字母，所以它具有极强的适应性(并且由于它使用vw单位，因此具有响应性)； 唯一的问题是它的外观完全取决于已安装或嵌入该字体的用户。 永远无法完全保证，因此更好的方法可能是裁剪上方图像。 对于第二个示例，使用几乎相同的标记：

<figure id="eastwood-jackman-clip">
	<img src="eastwood.jpg" alt>
	<img src="jackman.jpg" alt>
</figure>

The opening CSS remains the same, so I’ll just concentrate on the last image in the markup, sans vendor prefixes:

开头CSS保持不变，因此我将只关注标记中的最后一个图像， 没有供应商前缀：

img:last-child { 
	clip-path: url(#y-shape);
	clip-path: polygon(16% 0, 40% 57%, 40% 100%, 72% 100%, 72% 57%, 100% 0, 72% 0%, 57% 28%, 48% 0);
	filter: hue-rotate(120deg);
}

I’ve covered the SVG equivalent markup necessary for Firefox to clip the image in an earlier article:

我已经在较早的文章中介绍了Firefox裁剪图像所需的SVG等效标记：

<svg id="shapeclipper">
	<defs>
		<clipPath id="y-shape" clipPathUnits="objectBoundingBox">
			<polygon points=".16 0, .40 .57, .40 1, .72 1, .72 .57, 1 0, .72 0, .57 .28, .48 0" />
		</clipPath>
	</defs>
</svg>

The result can be quite effective… and entirely written in CSS.

结果可能非常有效……并且完全用CSS编写。

边注 (Sidenote)

<figure> and <figcaption> have been used in the examples as “placeholder markup”: if you decided to use more than a single letter for a blended caption, <figcaption> would be the appropriate markup. However, as Selen points out in the comments below, there's nothing here that couldn’t be replicated by using <div> elements; the result would also be more semantically correct in most cases.

在示例中， <figure>和<figcaption>被用作“占位符标记”：如果您决定对混合字幕使用多个字母，则<figcaption>将是适当的标记。 但是，正如Selen在下面的评论中指出的那样，这里没有使用<div>元素无法复制的内容； 在大多数情况下，结果在语义上也将更加正确。

翻译自: https://thenewcode.com/1012/MultiLayer-Effects-With-CSS-Clip-Paths-Filters-and-Blend-Modes

图片 css 剪切