图片 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 剪切