Question

我正在尝试找到使用CSS锐化图像的方法，并且发现了this example.

.sharpen {
 mix-blend-mode: hard-light;

 &,
 &::before,
 &::after {
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
 }

 &::before,
 &::after {
   content: '';
   background: url('https://source.unsplash.com/iI72r3gSwWY/750') no-repeat;
 }

 &::after {
   filter: invert(1);
   opacity: 0.5;
   top: -1px; left: -1px;
 }
}

在CSS样式表中，有三个:before和:after伪元素，并且如果它们产生相同的图像效果，我会像这样将它们合并为一个：

.sharpen {
 mix-blend-mode: hard-light;

 &,
 &::before,
 &::after {
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   content: '';
   background: url('https://source.unsplash.com/iI72r3gSwWY/750') no-repeat;
   filter: invert(1);
   opacity: 0.5;
   top: -1px; left: -1px;
 }

但是，它不会产生与原始图像相同的图像效果。我的问题是

1）为什么需要三个独立的:after选择器来创建效果？

2）有没有更简单的方法可以在CSS中达到相同的效果？

Answer 1

.sharpen {
 mix-blend-mode: hard-light;

 &,
 &::before,
 &::after {
   /** those rules will be applied to '&' AND '&::before' AND '&::after' */
 }

 &::before,
 &::after {
   /** those rules will be applied to '&::before' AND '&::after' */
 }

 &::after {
   /** those rules will ONLY be applied to '&::after' */
 }
}

1）它需要3个单独的块，因为有些规则只需要应用于:: after，而有些规则只需要应用于:: before和:: after，而有些则需要应用于元素，:: after和:: before

2）从我对问题的理解来看，这是达到特定效果的最简单方法。如果不是最简单的话，那是一个非常简单的事情。

合并声明块

1 个答案: