Heim > Artikel > Web-Frontend > Ist das Erstellen von Textschatten mithilfe von CSS für Bilder geeignet?

Ist das Erstellen von Textschatten mithilfe von CSS für Bilder geeignet?

青灯夜游Original: 2022-09-06 17:29:511149Durchsuche

Nicht anwendbar; der Textschatten „text-shadow“ kann nur auf Text angewendet werden und funktioniert nicht auf Bildern. Wenn Sie dem Bild einen Schatteneffekt hinzufügen möchten, gibt es zwei Methoden: 1. Verwenden Sie den Box-Shadow-Randschatten, die Syntax „Box-Shadow: horizontaler Schatten, vertikaler Schatten, Unschärfe-Farbeinsatz;“ 2. Verwenden Sie den Filterfilter. die Syntax „filter:drop -shadow(horizontaler Schatten, vertikaler Schatten, Unschärfe, Ausbreitungsfarbe);“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Mit CSS erstellter Textschatten funktioniert nicht für Bilder.

Der Textschatten „text-shadow“ kann nur auf Texttext angewendet werden und funktioniert nicht auf Bildern.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css文本阴影text-shadow</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
			img{
				text-shadow: 3px 5px 5px #656B79; 
			}
        </style> 
    </head> 
    <body> 
        <h1>文本阴影！</h1>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="Ist das Erstellen von Textschatten mithilfe von CSS für Bilder geeignet?" >
    </body> 
</html>

Ist das Erstellen von Textschatten mithilfe von CSS für Bilder geeignet?

Sie können sehen, dass es auf dem Text einen Schatteneffekt gibt, auf dem Bild jedoch nicht.

Wenn Sie einem Bild einen Schatteneffekt hinzufügen möchten, gibt es zwei Methoden:

box-shadow attribute
filter:drop-shadow()

Das Folgende wird Ihnen vorgestellt

1. Verwenden Sie die Box-Shadow-Eigenschaft.

Die Box-Shadow-Eigenschaft fügt der Box einen oder mehrere Schatten hinzu.

Syntax: Box-Shadow: H-Shadow V-Shadow-Unschärfe-Spread-Farbeinsatz;box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			img {
				box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
				/*考虑浏览器兼容性*/
				-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
				-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
			}
		</style>
	</head>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="Ist das Erstellen von Textschatten mithilfe von CSS für Bilder geeignet?" >
	</body>
</html>

Ist das Erstellen von Textschatten mithilfe von CSS für Bilder geeignet?

2、使用filter:drop-shadow()

filter 属性定义了元素(通常是 Ist das Erstellen von Textschatten mithilfe von CSS für Bilder geeignet? )的可视效果(例如：模糊与饱和度)。

drop-shadow()可给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。

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

h-Shadow Erforderlich. Die Position des horizontalen Schattens. Negative Werte sind erlaubt. Ist das Erstellen von Textschatten mithilfe von CSS für Bilder geeignet?

v-shadow Erforderlich. Die Position des vertikalen Schattens. Negative Werte sind erlaubt.

🎜🎜unschärfe Optional. Unscharfe Distanz. 🎜🎜🎜🎜Spread Optional. Die Größe des Schattens. 🎜🎜🎜🎜Farbe optional. Die Farbe des Schattens. Siehe CSS-Farbwerte. 🎜🎜🎜🎜Einsatz optional. Verwandeln Sie den äußeren Schatten (Anfang) in einen inneren Schatten. 🎜🎜🎜🎜Beispiel: 🎜

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));
}

🎜

🎜🎜🎜2. Filter verwenden:drop-shadow()🎜🎜🎜Das Filterattribut definiert den visuellen Effekt (z. B. Unschärfe und Sättigung) des Elements (normalerweise Ist das Erstellen von Textschatten mithilfe von CSS für Bilder geeignet?

). 🎜🎜drop-shadow() kann einen Schatteneffekt auf dem Bild setzen. Schatten werden unter dem Bild zusammengesetzt und können unscharfe, versetzte Versionen der Matte sein, die in einer bestimmten Farbe gemalt werden können. 🎜🎜Syntax: filter:drop-shadow(H-Shadow V-Shadow Blur Spread Color);🎜🎜Beispiel: 🎜rrreee🎜🎜🎜🎜 (Lernvideo-Sharing: 🎜Web-Front-End-Entwicklung🎜 )🎜

Das obige ist der detaillierte Inhalt vonIst das Erstellen von Textschatten mithilfe von CSS für Bilder geeignet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 Filter

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS % ist relativ zu wasNächster Artikel：CSS % ist relativ zu was

In Verbindung stehende Artikel

Mehr sehen