Sie können das Filterattribut und die Funktion „blur()“ in HTML verwenden, um das Foto zu verwischen. Sie müssen nur den „Filter: Blur(px);“-Codestil hinzufügen. Das Filterattribut wird verwendet, um den visuellen Effekt von Bildelementen zu definieren. Wenn der Wert auf „blur(value)“ eingestellt ist, können Sie die Gaußsche Unschärfe für das Bild festlegen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
In HTML können Sie das Filterattribut verwenden und den Wert auf „blur(px)“ setzen, um das Foto unscharf zu machen.
CSS-Filterattribut
Das Filterattribut definiert den visuellen Effekt (z. B. Unschärfe und Sättigung) eines Elements (normalerweise ).
blur(px) : Gaußsche Unschärfe für das Bild festlegen. Der „Radius“-Wert legt die Standardabweichung der Gaußschen Funktion fest, also wie viele Pixel auf dem Bildschirm zusammengefügt werden. Je größer der Wert, desto unschärfer ist er kann den CSS-Längenwert festlegen, Prozentwerte werden jedoch nicht akzeptiert.
Beispiel:
<!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="So machen Sie Fotos mit HTML-Code unscharf" >
</div>
</div>
</body>
</html>Rendering:
【Empfohlenes Tutorial: CSS-Video-Tutorial】
Filterfunktion
Hinweis: Filter verwenden normalerweise Prozentsätze (z. B. 75 %). natürlich Sie können zum Ausdrücken auch Dezimalzahlen verwenden (z. B. 0,75).
| Filter | Beschreibung |
|---|---|
| keine | Standardwert, keine Auswirkung. |
| Unschärfe (px) | Legen Sie die Gaußsche Unschärfe für das Bild fest. Der „Radius“-Wert legt die Standardabweichung der Gaußschen Funktion fest, oder wie viele Pixel auf dem Bildschirm zusammengemischt werden. Je größer der Wert, desto unschärfer ist er. Wenn kein Wert festgelegt ist, ist der Standardwert 0; Dieser Parameter kann den CSS-Längenwert festlegen, akzeptiert jedoch keine Prozentwerte. |
| Helligkeit(%) | Wenden Sie eine lineare Multiplikation auf das Bild an, um es heller oder dunkler erscheinen zu lassen. Bei einem Wert von 0 % ist das Bild vollständig schwarz. Wenn der Wert 100 % beträgt, erfolgt keine Änderung am Bild. Andere Werte entsprechen linearen Multiplikatoreffekten. Werte über 100 % sind in Ordnung und das Bild wird heller als zuvor. Wenn kein Wert festgelegt ist, ist der Standardwert 1. |
| Kontrast(%) | Passen Sie den Kontrast des Bildes an. Bei einem Wert von 0 % ist das Bild vollständig schwarz. Der Wert beträgt 100 % und das Bild bleibt unverändert. Die Werte können 100 % überschreiten, was bedeutet, dass ein niedrigerer Vergleich verwendet wird. Wenn kein Wert festgelegt ist, ist der Standardwert 1. |
| Drop-Shadow (H-Shadow V-Shadow Blur Spread Color) | Legt einen Schatteneffekt für das Bild fest. Schatten werden unter dem Bild zusammengesetzt und können unscharfe, versetzte Versionen der Matte aufweisen, die in einer bestimmten Farbe gemalt werden können. Die Funktion akzeptiert Werte vom Typ 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。 |
| 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) Nach dem Login kopieren 更多编程相关知识，请访问：编程视频！！ Das obige ist der detaillierte Inhalt vonSo machen Sie Fotos mit HTML-Code unscharf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Vorheriger Artikel：So ändern Sie die Schriftart von Tags in HTML
Nächster Artikel：So legen Sie den Textabstand in HTML fest
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Automatische PX-Konvertierung in REM-Fehler
<style>html { font-size: calc(100vw / 3.75); }body { Schriftgröße: 0,16rem...
Aus 2024-04-16 09:34:16
0
0
4687
verwandte Themen
Mehr>
|
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
