Maison > Article > interface Web > La création d'une ombre de texte à l'aide de CSS est-elle adaptée aux images ?

La création d'une ombre de texte à l'aide de CSS est-elle adaptée aux images ?

青灯夜游original: 2022-09-06 17:29:511158parcourir

Non applicable ; l'ombre de texte "text-shadow" ne peut être appliquée qu'au texte et ne fonctionne pas sur les images. Si vous souhaitez ajouter un effet d'ombre à l'image, il existe deux méthodes : 1. Utilisez box-shadow border shadow, la syntaxe "box-shadow : ombre horizontale ombre verticale flou propagation couleur encart ;" 2. Utilisez le filtre, la syntaxe "filter:drop -shadow (ombre horizontale ombre verticale flou couleur de propagation);".

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

L'ombre de texte créée en CSS ne fonctionne pas pour les images.

L'ombre de texte "text-shadow" ne peut être appliquée qu'au texte et ne fonctionne pas sur les images.

<!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="La création d'une ombre de texte à l'aide de CSS est-elle adaptée aux images ?" >
    </body> 
</html>

La création dune ombre de texte à laide de CSS est-elle adaptée aux images ?

Vous pouvez voir qu'il y a un effet d'ombre sur le texte, mais pas sur l'image.

Si vous souhaitez ajouter un effet d'ombre à une image, il existe deux méthodes :

attribut box-shadow
filter:drop-shadow()

Ce qui suit vous présentera

1. Utilisez la propriété box -shadow

La propriété box-shadow ajoute une ou plusieurs ombres à la boîte.

Syntaxe : box-shadow : h-shadow v-shadow flou propagation couleur encart ;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="La création d'une ombre de texte à l'aide de CSS est-elle adaptée aux images ?" >
	</body>
</html>

La création dune ombre de texte à laide de CSS est-elle adaptée aux images ?

2、使用filter:drop-shadow()

filter 属性定义了元素(通常是 La création d'une ombre de texte à l'aide de CSS est-elle adaptée aux images ? )的可视效果(例如：模糊与饱和度)。

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

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

h-shadow Obligatoire. La position de l'ombre horizontale. Les valeurs négatives sont autorisées. La création dune ombre de texte à laide de CSS est-elle adaptée aux images ?

v-shadow Obligatoire. La position de l'ombre verticale. Les valeurs négatives sont autorisées.

🎜🎜flou facultatif. Distance floue. 🎜🎜🎜🎜à tartiner Facultatif. La taille de l'ombre. 🎜🎜🎜🎜couleur en option. La couleur de l'ombre. Voir les valeurs de couleur CSS. 🎜🎜🎜🎜encart facultatif. Changez l'ombre extérieure (début) en ombre intérieure. 🎜🎜🎜🎜Exemple : 🎜

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. Utilisez filter:drop-shadow()🎜🎜🎜L'attribut filter définit l'effet visuel (tel que le flou et la saturation) de l'élément (généralement La création d'une ombre de texte à l'aide de CSS est-elle adaptée aux images ?

La création d'une ombre de texte à l'aide de CSS est-elle adaptée aux images ?

). 🎜🎜drop-shadow() peut définir un effet d'ombre sur l'image. Les ombres sont composées sous l'image et peuvent avoir des versions floues et décalées du cache qui peuvent être peintes dans une couleur spécifique. 🎜🎜Syntaxe : filter:drop-shadow(h-shadow v-shadow blur spread color);🎜🎜Exemple : 🎜rrreee🎜🎜🎜🎜 (Partage de vidéos d'apprentissage : 🎜développement web front-end🎜 )🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css css3 Filter

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：css% est relatif à quoiArticle suivant：css% est relatif à quoi

Articles Liés

Voir plus