Rumah hujung hadapan web tutorial css css3如何实现图片的高斯模糊效果?CSS3 Filter(滤镜)实现(代码实例)

css3如何实现图片的高斯模糊效果?CSS3 Filter(滤镜)实现(代码实例)

Sep 19, 2018 pm 05:23 PM
css3 filter penapis

本章给大家介绍用css3如何实现图片的高斯模糊效果,CSS3 Filter(滤镜)实现对图片元素模糊处理;让大家了解如何设置图片元素的模糊效果,通过实例介绍filter实现图片高斯模糊的三种效果。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、什么是filter (滤镜)

CSS3 Filter(滤镜)属性定义了元素(通常是<img>)的可视效果,提供了模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。

浏览器支持:

-webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。

1.jpg

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用css opacity 属性

下面看看filter这个属性,现在规范中支持的效果:

  1. grayscale(灰度):值为0-1之间的小数 

  2. sepia(褐色):值为0-1之间的小数

  3. saturate(饱和度):值为num

  4. hue-rotate(色相旋转):值为angle

  5. invert(反色):值为0-1之间的小数

  6. opacity(透明度):值为0-1之间的小数

  7. brightness(亮度):值为0-1之间的小数

  8. contrast(对比度):值为num

  9. blur(模糊):值为length(radius)

  10. drop-shadow(阴影)

实现模糊效果的filter 语法:

filter: blur();
Salin selepas log masuk

blur()给图像设置高斯模糊。"length(radius)"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。

二、图片模糊的三种效果

原图:

2.png

1.css普通图片模糊效果(整张图片全模糊)

&lt;!DOCTYPE html&gt;
&lt;html&gt;

	&lt;head&gt;
		&lt;meta charset=&quot;UTF-8&quot;&gt;
		&lt;title&gt;图片模糊&lt;/title&gt;
		&lt;style&gt;
			.bg {
				width: 1240px;
				height: 592px;
				position: relative;
				background: url(&quot;2.png&quot;) no-repeat fixed;
				padding: 1px;
				box-sizing: border-box;
				z-index: 1;
			}
			
			.bg:after {
				content: &quot;&quot;;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: inherit;
				filter: blur(2px);
				z-index: 2;
			}
			
			.drag {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 200px;
				height: 200px;
				text-align: center;
				z-index: 11;
			}
		&lt;/style&gt;
	&lt;/head&gt;

	&lt;body&gt;
		&lt;div class=&quot;bg&quot;&gt;&lt;/div&gt;
	&lt;/body&gt;

&lt;/html&gt;
Salin selepas log masuk

效果图:

1.jpg

2.css图片局部模糊效果

&lt;!DOCTYPE html&gt;
&lt;html&gt;

	&lt;head&gt;
		&lt;meta charset=&quot;UTF-8&quot;&gt;
		&lt;title&gt;图片模糊&lt;/title&gt;
		&lt;style&gt;
			.bg {
				width: 1240px;
				height: 592px;
				background: url(&quot;2.png&quot;) no-repeat fixed;
				padding: 1px;
				box-sizing: border-box;
				z-index: 1;
			}
			
			.drag {
				margin: 100px auto;
				width: 300px;
				height: 300px;
				background: inherit;
				position: relative;
				text-align: center;
			}
			
			.drag&gt;div {
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 200px;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 11;
			}
			
			.drag:after {
				content: &quot;&quot;;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: inherit;
				filter: blur(30px);/*为了模糊更明显,调高模糊度*/
				z-index: 2;
			}
		&lt;/style&gt;
	&lt;/head&gt;

	&lt;body&gt;
		&lt;div class=&quot;bg&quot;&gt;
			&lt;div class=&quot;drag&quot;&gt;like window&lt;/div&gt;
		&lt;/div&gt;
	&lt;/body&gt;

&lt;/html&gt;
Salin selepas log masuk

效果图:

2.jpg

3.css图片局部清晰效果

&lt;!DOCTYPE html&gt;
&lt;html&gt;

	&lt;head&gt;
		&lt;meta charset=&quot;UTF-8&quot;&gt;
		&lt;title&gt;图片模糊&lt;/title&gt;
		&lt;style&gt;
			.bg {
				width: 1240px;
				height: 592px;
				background: url(&quot;2.png&quot;) no-repeat fixed;
				padding: 1px;
				box-sizing: border-box;
				z-index: 1;
			}
			
			.bg:after {
				content: &quot;&quot;;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: inherit;
				filter: blur(3px);
				z-index: 1;
			}
			
			.drag {
				position: absolute;
				left: 40%;
				top: 30%;
				/*transform: translate(-50%,-50%);*/
				width: 200px;
				height: 200px;
				text-align: center;
				background: inherit;
				z-index: 11;
				box-shadow: 0 0 10px 6px rgba(0, 0, 0, .5);
			}
		&lt;/style&gt;
	&lt;/head&gt;

	&lt;body&gt;
		&lt;div class=&quot;bg&quot;&gt;
			&lt;div class=&quot;drag&quot;&gt;like window&lt;/div&gt;
		&lt;/div&gt;
	&lt;/body&gt;

&lt;/html&gt;
Salin selepas log masuk

效果图:

3.jpg

Atas ialah kandungan terperinci css3如何实现图片的高斯模糊效果?CSS3 Filter(滤镜)实现(代码实例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Jun 28, 2022 pm 01:39 PM

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)

Panduan Amalan Pemprosesan Imej C++: Melaksanakan Kesan dan Penapis Khas Imej Panduan Amalan Pemprosesan Imej C++: Melaksanakan Kesan dan Penapis Khas Imej Nov 27, 2023 am 11:40 AM

Panduan Amalan Pemprosesan Imej C++: Melaksanakan Kesan dan Penapis Khas Imej

Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Jul 19, 2022 am 11:28 AM

Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang Jun 01, 2022 pm 07:15 PM

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang

Bagaimana untuk melaksanakan sempadan renda dalam css3 Bagaimana untuk melaksanakan sempadan renda dalam css3 Sep 16, 2022 pm 07:11 PM

Bagaimana untuk melaksanakan sempadan renda dalam css3

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Jun 10, 2022 pm 01:00 PM

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!

css3 apakah itu susun atur penyesuaian css3 apakah itu susun atur penyesuaian Jun 02, 2022 pm 12:05 PM

css3 apakah itu susun atur penyesuaian

Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3 Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3 Apr 25, 2022 pm 04:52 PM

Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3

See all articles