Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)-CSS-Tutorial-php.cn

Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

青灯夜游

Freigeben： 2018-10-18 13:58:35

Original

8578 Leute haben es durchsucht

Wie erreiche ich einen Bildfiltereffekt in CSS3? Tatsächlich ist es sehr einfach, das CSS3-Filterattribut zu verwenden, um mehrere Filtereffekte zu erzielen. In diesem Artikel erfahren Sie, welche Filtereffekte mit CSS3-Filterattributen erzielt werden können und wie Sie diese Bildfiltereffekte implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Erstellen wir zunächst eine Demo:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3 filter滤镜</title>
		<style>
			.demo{
				width: 400px;
				height: 300px;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)" / alt="Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)" >
		</div>
	</body>
</html>

Nach dem Login kopieren

Der Effekt sieht so aus (ohne einen Filtereffekt hinzuzufügen):

Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

Werfen wir einen Blick auf die Bildfiltereffekte, die mit dem CSS3-Filterattribut erzielt werden können:

1 Der CSS3-Bildunschärfefiltereffekt

nur Sie müssen den folgenden CSS-Code hinzufügen:

.demo img{
filter: blur(2px);/* 给图像设置高斯模糊，值越大越模糊 */
}

Nach dem Login kopieren

Rendering:

Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

Unter Berücksichtigung der Browserkompatibilität können wir eine Anweisung hinzufügen:

.demo img{
-webkit-filter: blur(2px); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: blur(2px);/* 给图像设置高斯模糊 */
}

Nach dem Login kopieren

2. CSS3-Filter---Helligkeit(%) legt die Bildhelligkeit fest

.demo img{
-webkit-filter: brightness(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: brightness(50%);
/* 设置图片的亮度，使其看起来更亮或更暗。如果值是0%，图像会全黑；值是100%，则图像无变化；值是100%以上，则图像更亮*/
}

Nach dem Login kopieren

Rendering:

Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

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

Nach dem Login kopieren

Rendering:

Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

3. CSS3-Filter---contrast(%) legt den Bildkontrast fest

.demo img{
    -webkit-filter: contrast(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
    filter: contrast(50%);
    /* 设置图片对比度，值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。*/
}

Nach dem Login kopieren

Rendering:

Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

.demo img{
    -webkit-filter: contrast(150%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
    filter: contrast(150%);
}

Nach dem Login kopieren

Rendering:

Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

4 filter---drop-shadow() setzt den Bildschatten

.demo img{
     -webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5)); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
     filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
     /* 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。*/
}

Nach dem Login kopieren

Rendering:

Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

Anleitung:

filter:drop-shadow(h-shadow v-shadow blur spread color);

Nach dem Login kopieren

h-shadow: Legt den horizontalen Versatz des Schattens fest. Negative Werte bewirken, dass der Schatten auf der linken Seite des Elements erscheint.

v-shadow: Legt den vertikalen Versatz des Schattens fest. Negative Werte sorgen dafür, dass der Schatten über dem Element erscheint.

Unschärfe: Je größer der Wert, desto unschärfer wird er und der Schatten wird größer und heller. Wenn nicht festgelegt, ist der Standardwert 0 (der Schatten ist sehr scharf).

Spread: Bei positiven Werten wird der Schatten größer und größer, bei negativen Werten wird der Schatten kleiner; wenn nicht festgelegt, ist der Standardwert 0 (der Schatten hat die gleiche Größe wie das Element). ). Hinweis: Webkit und einige andere Browser unterstützen die Verbreitung nicht und werden nicht gerendert, wenn sie hinzugefügt werden.

Farbe: Legen Sie die Schattenfarbe fest. Wenn nicht festgelegt, basiert der Farbwert auf dem Browser.

5. CSS3-Filter---Graustufen(%) legt die Graustufen des Bildes fest

.demo img{
   -webkit-filter: grayscale(100%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
   filter: grayscale(100%);
   /* 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。*/
}

Nach dem Login kopieren

Rendering:

Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

6. CSS3-Filter---hue-rotate(deg) legt die Bildfarbtonrotation fest

.demo img{
   -webkit-filter: hue-rotate(90deg); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
   filter: hue-rotate(90deg);
   /* 给图像应用色相旋转，值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈*/
}

Nach dem Login kopieren

Rendering:

Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

7. CSS3-Filter --- invertieren (%), um die inverse Farbe des Bildes festzulegen

.demo img{
   -webkit-filter: invert(100%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
   filter: invert(100%);
   /* 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。*/
}

Nach dem Login kopieren

Rendering:

Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

8. CSS3-Filter --- Deckkraft (%) Bildtransparenz einstellen

.demo img{
   -webkit-filter: opacity(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
   filter: opacity(50%);
   /* 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。 */
}

Nach dem Login kopieren

Rendering:

1Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

9. CSS3-Filter---saturate(%) set saturation

.demo img{
   -webkit-filter: saturate(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
   filter: saturate(50%);
   /* 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。超过100%的值是允许的，则有更高的饱和度。*/
}

Nach dem Login kopieren

Rendering:

1Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

10. CSS3-Filter --- Sepia (%) setzt das Bild auf Braun (ein Retro-Altfoto-Feeling)

.demo img{
   -webkit-filter: sepia(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
   filter: sepia50%);
   /* 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。 */
}

Nach dem Login kopieren

Rendering:

1Wie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung)

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter CSS-Basis-Video-Tutorial , CSS3-Video-Tutorial , Bootstrap-Video-Tutorial !

Das obige ist der detaillierte Inhalt vonWie erreiche ich einen Bildfiltereffekt in CSS3? Implementierung von Filterattributen (detaillierte Bild- und Texterklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!