简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Comment rendre des photos floues avec du code HTML

Comment rendre des photos floues avec du code HTML

青灯夜游
青灯夜游original
2021-03-04 11:22:134861parcourir

Vous pouvez utiliser l'attribut filter et la fonction blur() en HTML pour flouter la photo. Il vous suffit d'ajouter le "filter: blur(px);" L'attribut filter est utilisé pour définir l'effet visuel des éléments de l'image. Lorsque la valeur est définie sur "blur(value)", vous pouvez définir un flou gaussien sur l'image.

Comment rendre des photos floues avec du code HTML

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

En HTML, vous pouvez utiliser l'attribut filter et définir la valeur sur "blur(px)" pour rendre la photo floue.

attribut de filtre CSS

attribut de filtre définit l'élément (généralement Comment rendre des photos floues avec du code HTML) Effets visuels (par exemple flou et saturation).

blur(px)  : Définissez le flou gaussien sur l'image. La valeur "rayon" définit l'écart type de la fonction gaussienne, ou le nombre de pixels fusionnés sur l'écran, donc plus la valeur est grande, plus elle est floue s'il n'y a pas de valeur définie, la valeur par défaut est 0 pour ce paramètre ; peut définir la valeur de longueur CSS, mais les valeurs de pourcentage ne sont pas acceptées.

Exemple : 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			body,
			html {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
			}
			
			.container {
				padding: 20px;
				position: relative;
				overflow: hidden;
			}
			
			img {
				height: 200px;
				transition: .5s ease-in-out;
			}
			
			.container div {
				width: 300px;
				overflow: hidden;
				float: left;
				margin-left: 40px;
			}
			
			.blur img {
				filter: blur(15px);
				-webkit-filter: blur(15px);
			}
			
			.blur img:hover {
				filter: blur(0);
				-webkit-filter: blur(0);
			}
		</style>

	</head>

	<body>
		<div class="blur container">
			<div>
				<img  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548676269108&di=64d110c6c0c15d9bc77c7ffd4f049f1b&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F6a63f6246b600c33d32b0328174c510fd8f9a184.jpg" / alt="Comment rendre des photos floues avec du code HTML" >
			</div>
		</div>

	</body>

</html>

Rendu :

Comment rendre des photos floues avec du code HTML

[Tutoriel recommandé : Tutoriel vidéo CSS 】

Fonction de filtre

Remarque : les filtres utilisent généralement des pourcentages (tels que : 75 %), bien sûr, ils peuvent également être exprimés en décimales (tels que : 0,75).

Filtre Description
aucun Valeur par défaut, aucun effet.
blur(px) Règle le flou gaussien sur l'image. La valeur "rayon" définit l'écart type de la fonction gaussienne, ou le nombre de pixels fusionnés sur l'écran, donc plus la valeur est grande, plus elle est floue

Si aucune valeur n'est définie, la valeur par défaut ; est 0 ; ce paramètre peut définir la valeur de longueur CSS, mais n'accepte pas la valeur en pourcentage.
luminosité(%) Applique une multiplication linéaire à l'image, la faisant apparaître plus claire ou plus sombre. Si la valeur est 0%, l'image sera complètement noire. Si la valeur est de 100 %, il n'y aura aucun changement dans l'image. D'autres valeurs correspondent à des effets multiplicateurs linéaires. Les valeurs supérieures à 100 % sont acceptables et l'image sera plus lumineuse qu'avant. Si aucune valeur n'est définie, la valeur par défaut est 1.
contraste(%) Ajustez le contraste de l'image. Si la valeur est 0%, l'image sera complètement noire. La valeur est de 100 % et l'image reste inchangée. Les valeurs peuvent dépasser 100 %, ce qui signifie qu'une comparaison inférieure sera utilisée. Si aucune valeur n'est définie, la valeur par défaut est 1.
drop-shadow(h-shadow v-shadow blur spread color)

Définit 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. La fonction accepte les valeurs de type (définies dans le contexte CSS3), sauf que le mot clé "inset" n'est pas autorisé. Cette fonction est très similaire à la propriété box-shadow box-shadow existante ; la différence est que grâce au filtre, certains navigateurs fournissent une accélération matérielle pour de meilleures performances. <code style="font-style: normal;line-height: 1.5"><shadow>参数如下：</shadow>

<code style="font-style: normal;line-height: 1.5"><ul> <li> <strong><offset-x></offset-x></strong> <strong><offset-y></offset-y></strong> <small>(必须)</small> </li> <li>这是设置阴影偏移量的两个 <length>值. <strong><offset-x></offset-x></strong> 设定水平方向距离. 负值会使阴影出现在元素左边. <strong><offset-y></offset-y></strong>设定垂直距离.负值会使阴影出现在元素上方。查看<strong><length></length></strong>可能的单位.<br> <strong><span style="font-family:Open Sans, sans-serif">如果两个值都是</span>0</strong>, 则阴影出现在元素正后面 (如果设置了<span style="line-height: 1.5"> </span><code style="font-style: normal;line-height: 1.5"><blur-radius><span style="line-height: 1.5"> and/or </span><code style="font-style: normal;line-height: 1.5"><spread-radius>，<span style="line-height: 1.5">会有模糊效果</span><span style="line-height: 1.5">).</span></spread-radius> <code style="font-style: normal;line-height: 1.5"><code style="font-style: normal;line-height: 1.5">
  • (可选)
  • 这是第三个code>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).
  • (可选)
  • 这是第四个 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 
    注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。
  •  
  • (可选)
  • 查看 该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
    • <code style="font-style: normal;line-height: 1.5"><code style="font-style: normal;line-height: 1.5">
    grayscale(%)

    将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
    hue-rotate(deg)

    给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
    invert(%)

    反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。
    opacity(%)

    转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
    saturate(%)

    转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
    sepia(%)

    将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
    url()

    URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

    例如：

    filter: url(svg-url#element-id)

    更多编程相关知识，请访问：编程视频！！

    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 firefox css css3 html webkit xml Filter Length
    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：Comment changer la police des balises en HTMLArticle suivant：Comment changer la police des balises en HTML

    Articles Liés

    Voir plus