Web开发编程网
分享Web开发相关技术

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

它如何工作的

使用一个或多个较新的CSS属性(background-blend-modemix-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%;

verticalalign: top!important;

margin: 0!important;

visibility: hidden!important;

opacity: 0;

}

实际使用时建议设置 widthheight 和 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

未经允许不得转载:WEB开发编程网 » 使用 CSS 实现图片的滤镜效果
微信扫码关注微信公众号

WEB开发编程网

谢谢支持,我们一直在努力

安全提示:您正在对WEB开发编程网进行赞赏操作,一但支付,不可返还。