CSS filter滤镜属性使用_代码007(未授权)

本文介绍: CSS的滤镜 filter 属性，可以对网页中的图片进行类似Ph o t o shop 图片处理的效果，通过CSS对图像进行处理，CSS的filter 属性可以得到一些类似PS的滤镜效果。浏览器支持情况：只有IE浏览器不支持 filter（滤镜）属性，为了兼容低版本的sa fa r i和google 浏览器，需要加上前缀–webkit-。

CSS的滤镜 filter属性，可以对网页中的图片进行类似Ph oto shop 图片处理的效果，通过CSS对图像进行处理，CSS的filter属性可以得到一些类似PS的滤镜效果。

浏览器支持情况：只有IE浏览器不支持 filter（滤镜）属性，为了兼容低版本的sa fa r i和google浏览器，需要加上前缀–webkit– 。

简单来说，CSS滤镜就是提供类似PS的图形特效，像模糊，锐化或元素变色等功能。通常被用于调整图片，背景和边界的渲染。这篇我来看一下CSS滤镜中那些常用的用法。

常用滤镜：

1、使用 filter：blur(px) – 生成毛玻璃效果，值越大越模糊。

2、使用filter：drop–shadow() – 生成整体阴影效果，和box–shadow 相似，但又不同。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

<div data-filter="image-none" class="none"&gt;
	<h2>none</h2>
	<img src="1.jpg">
</div>

.none img {
    filter: none;
}

<div data-filter="image-normal" class="normal">
	<h2>normal</h2>
	<img src="1.jpg">
</div>

.normal img {
    
}

<div data-filter="image-blur" class="blur">
	<h2>blur</h2>
	<img src="1.jpg">
</div>

.blur img {
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

drop-shadow(h-shadow v-shadow blur spread color)

<div data-filter="image-shadow" class="shadow">
	<h2>shadow</h2>
	<img src="1.jpg">
</div>

.shadow img {
    filter: drop-shadow(2px 4px 6px #000);
    -webkit-filter: drop-shadow(2px 4px 6px #000);
}

<div data-filter="image-grayscale" class="grayscale">
	<h2>grayscale</h2>
	<img src="1.jpg">
</div>

.grayscale img {
  filter: grayscale(50%); /* 值为0-1之间的小数,  grayscale(0) 原图；grayscale(1）完全变成灰色 */
  -webkit-filter：grayscale(50%);  /* Chrome, Safari, Opera */
}

<div data-filter="image-brightness" class="brightness">
	<h2>brightness</h2>
	<img src="1.jpg">
</div>

.brightness img {
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
}

<div data-filter="image-contrast" class="contrast">
	<h2>contrast</h2>
	<img src="1.jpg">
</div>

.contrast img {
    filter: contrast(50%);
    -webkit-filter: contrast(50%);
}

<div data-filter="image-rotate" class="rotate">
	<h2>rotate</h2>
	<img src="1.jpg">
</div>

.rotate img {
    filter: hue-rotate(50deg);
    -webkit-filter: hue-rotate(50deg);
}

<div data-filter="image-invert" class="invert">
	<h2>invert</h2>
	<img src="1.jpg">
</div>

.invert img {
    filter: invert(50%);
    -webkit-filter: invert(50%);
}

<div data-filter="image-opacity" class="opacity">
	<h2>opacity</h2>
	<img src="1.jpg">
</div>

.opacity img {
    filter: opacity(50%);
    -webkit-filter: opacity(50%);
}

<div data-filter="image-saturate" class="saturate">
	<h2>saturate</h2>
	<img src="1.jpg">
</div>

.saturate img {
    filter: saturate(50%);
    -webkit-filter: saturate(50%);
}

<div data-filter="image-sepia" class="sepia">
	<h2>sepia</h2>
	<img src="1.jpg">
</div>

.sepia img {
    filter: sepia(0%);
    -webkit-filter: sepia(0%);
}

<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
baseProfile="full">
    <defs>
        <!-- 此处定义滤镜 -->
        <filter id="blur">
        <feGaussianBlur stdDeviation="4" result="blur"/>
        <!-- feGaussianBlur(滤镜): 该滤镜对输入图像进行高斯模糊 -->
        <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
        <!-- feOffset(模糊)：创建阴影效果 -->
        </filter>
    </defs>
</svg>

<div data-filter="image-svg-xml" class="svg-xml">
	<h2>svg-xml</h2>
	<img src="1.jpg">
</div>

.svg-xml img {
    filter: url("./svg.xml#blur");
    -webkit-filter: url("./svg.xml#blur");
}

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

前言

常用属性

滤镜效果

Normal 正常

高斯 模糊 blur(Npx) (给图像设置)

阴影滤镜 drop–sha d ow

灰阶滤镜 gray scale

亮度滤镜 brightness

对比度滤镜 c on trast

色相旋转滤镜 hue–rotate

反转滤镜 invert

透明度滤镜 opacity

转换图像饱和度滤镜 saturate

深褐色滤镜 sepia

SVG滤镜

发表回复取消回复