使用 CSS 实现图片的滤镜效果-WEB开发编程网

它如何工作的

使用一个或多个较新的CSS属性(background-blend-mode, mix-blend-mode, 或者 filter)可以让我们惊艳地处理单个图片效果。

这是用于CSS图像效果演示的灯塔的图像，这是未编辑过的背景图像，后面我们使用 CSS 对其进行图像效果演示。

混合： 在大多数这些效果中，单个 background-image url 可以重复一次或多次使用，并使用CSS混合模式(multiply, overlay, screen, difference,等的)与其自身混合。

滤镜： 在其中的一些效果中，CSS filter(滤镜) 属性被用于进一步精细化的输出。像 grayscale()(灰度), brightness()(亮度), 和 contrast()(对比度) 这样的函数可以对图片效果进行调整，以便使你使用的图像获得更好的效果。 CSS Filter 具体效果可以查看这篇文章。

实现： 你可以在 CodePen 查看效果的实现，或向下滚动到实现部分。

改进： 这些效果可以被进一步增强，你可以自己尝试一下。

可靠性： 默认情况下，原图显示无任何影响。当 CSS @supports 检测到支持所需的 CSS 属性和效果值时，那么效果将被启用。这是一个相当精确的，本地的和轻量级的功能检测。

下载： 这些效果的完整 CSS 库可以下载，未压缩版（12.8kb）或压缩版（8.7kb）。使用 gzip 压缩后，整个图像效果库小于1300字节。

GitHub：该项目可在 GitHub 上获得。

实现

在每个 CSS / SCSS 片段中，将 photo.jpg 替换为你自己使用的图片URL。

示例HTML

<div class=“preview pencil-effect”>

<img src=“http://www.css88.com/book/image-effects/photo.jpg” alt=“Image of lighthouse” />

</div>

在这个实现中，标签只是用作占位符，示例中使用 CSS 的 visibility: hidden; 是为了为效果设置正确的宽高比，例如示例辅助的 CSS：

.preview {

margin: 10px 20px 20px;

}

.preview img{

width: 100%;

vertical–align: top!important;

margin: 0!important;

visibility: hidden!important;

opacity: 0;

}

实际使用时建议设置 width，height 和 alt 属性值。

示例中使用的 SCSS ，你可以将其转化为 CSS 。你也可以在 CodePen 中尝试这些效果。

Pencil（铅笔画效果）

html:

<div class="preview pencil-effect">
  <img src="http://www.css88.com/book/image-effects/photo.jpg" alt="Image of lighthouse" />
</div>

scss:

.pencil-effect {
  $url: url(http://www.css88.com/book/image-effects/photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: invert(1)) and (background-blend-mode: difference) {
    background-image: $url, $url;
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px),
      calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
    box-shadow: inset 0 0 0 1px black;
  }
}

Colored Pencil（彩笔画效果）

html:

<div class="preview colored-pencil-effect">
  <img src="http://www.css88.com/book/image-effects/photo.jpg" alt="Image of lighthouse" />
</div>

scss:

.colored-pencil-effect {
    $url : url(http://www.css88.com/book/image-effects/photo.jpg);

    background-image: $url;
    background-size: cover;
    background-position: center;

    @supports (filter: invert(1)) and (mix-blend-mode: color) {
        position: relative;

        &:before,
        &:after {
            display: block;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            box-shadow: inset 0 0 0 1px black;
        }

        &:before {
            background-image: $url, $url;
            background-blend-mode: difference;
            background-position:
                calc(50% - 1px) calc(50% - 1px),
                calc(50% + 1px) calc(50% + 1px);
            filter: brightness(2) invert(1) grayscale(1);
        }

        &:after {
            background: inherit;
            mix-blend-mode: color;
        }
    }
}

使用 CSS 实现图片的滤镜效果

它如何工作的

实现

示例HTML

Pencil（铅笔画效果）

Colored Pencil（彩笔画效果）

更多相关有趣的CSS

相关推荐

WEB开发编程网