Web-Frontend
CSS-Tutorial
Wie erreicht man einen Gaußschen Unschärfeeffekt von Bildern in CSS3? CSS3-Filterimplementierung (Codebeispiel)
Wie erreicht man einen Gaußschen Unschärfeeffekt von Bildern in CSS3? CSS3-Filterimplementierung (Codebeispiel)
In diesem Kapitel wird erläutert, wie Sie mit CSS3 den Gaußschen Unschärfeeffekt erzielen. Der CSS3-Filter implementiert die Unschärfe von Bildelementen. Anhand von Beispielen wird der Filter zum Erzielen des Gaußschen Effekts vorgestellt Unschärfe von Bildern. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
1. Was ist ein Filter?
Das CSS3-Filterattribut definiert die visuellen Effekte des Elements (normalerweise 
), die die Möglichkeit zur Unschärfe bieten und die Farbe von Elementen ändern. CSS3 Fitler wird häufig verwendet, um die Rendering-, Hintergrund- oder Randanzeigeeffekte von Bildern anzupassen.
Browserunterstützung:
-webkit-filter ist ein Attribut von CSS3. Webkit ist das erste, das diese Funktionen unterstützt, und der Effekt ist sehr gut.
Die Zahl in der Tabelle gibt die Versionsnummer des ersten Browsers an, der diese Methode unterstützt.
Das -webkit- direkt nach der Nummer ist das Präfix des angegebenen Browsers.
Hinweis: Das nicht standardmäßige „Filter“-Attribut, das von älteren Versionen von Internet Explorer (4.0 bis 8.0) unterstützt wird, ist veraltet. IE8 und niedrigere Browser verwenden normalerweise das CSS-Deckkraftattribut .
Werfen wir einen Blick auf die derzeit in der Spezifikation unterstützten Effekte:
-
Graustufen (Graustufen): Der Wert ist eine Dezimalzahl zwischen 0-1
Sepia (Braun): Der Wert ist eine Dezimalzahl zwischen 0-1
Sättigung (Sättigung): Der Wert ist Zahl
hue-rotate (Farbtonrotation): Der Wert ist Winkel
invert (invertieren): Der Wert ist eine Dezimalzahl zwischen 0-1
Opazität (Transparenz): Der Wert ist eine Dezimalzahl zwischen 0-1
Helligkeit (Helligkeit): Der Wert ist eine Dezimalzahl zwischen 0-1
Kontrast (Kontrast): Der Wert ist Zahl
Unschärfe (Unschärfe): Der Wert ist Länge (Radius)
drop-shadow (Schatten)
Filtersyntax zum Erzielen eines Unschärfeeffekts:
filter: blur();
blur() setzt die Gaußsche Unschärfe auf das Bild. Der Wert „Länge (Radius)“ 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. Wenn kein Wert festgelegt ist, ist der Standardwert 0. Dieser Parameter kann den CSS-Längenwert festlegen, Prozentwerte werden jedoch nicht akzeptiert.
Drei Effekte der Bildunschärfe
Originalbild:
1 .css normaler Bildunschärfeeffekt (das gesamte Bild ist unscharf)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片模糊</title>
<style>
.bg {
width: 1240px;
height: 592px;
position: relative;
background: url("Wie erreicht man einen Gaußschen Unschärfeeffekt von Bildern in CSS3? CSS3-Filterimplementierung (Codebeispiel)") no-repeat fixed;
padding: 1px;
box-sizing: border-box;
z-index: 1;
}
.bg:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(2px);
z-index: 2;
}
.drag {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
text-align: center;
z-index: 11;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>Rendering:
2.css Bild-Teilunschärfeeffekt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片模糊</title>
<style>
.bg {
width: 1240px;
height: 592px;
background: url("Wie erreicht man einen Gaußschen Unschärfeeffekt von Bildern in CSS3? CSS3-Filterimplementierung (Codebeispiel)") no-repeat fixed;
padding: 1px;
box-sizing: border-box;
z-index: 1;
}
.drag {
margin: 100px auto;
width: 300px;
height: 300px;
background: inherit;
position: relative;
text-align: center;
}
.drag>div {
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
z-index: 11;
}
.drag:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(30px);/*为了模糊更明显，调高模糊度*/
z-index: 2;
}
</style>
</head>
<body>
<div class="bg">
<div class="drag">like window</div>
</div>
</body>
</html>Rendering:
3.css-Bild, teilweise klarer Effekt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片模糊</title>
<style>
.bg {
width: 1240px;
height: 592px;
background: url("Wie erreicht man einen Gaußschen Unschärfeeffekt von Bildern in CSS3? CSS3-Filterimplementierung (Codebeispiel)") no-repeat fixed;
padding: 1px;
box-sizing: border-box;
z-index: 1;
}
.bg:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(3px);
z-index: 1;
}
.drag {
position: absolute;
left: 40%;
top: 30%;
/*transform: translate(-50%,-50%);*/
width: 200px;
height: 200px;
text-align: center;
background: inherit;
z-index: 11;
box-shadow: 0 0 10px 6px rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<div class="bg">
<div class="drag">like window</div>
</div>
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonWie erreicht man einen Gaußschen Unschärfeeffekt von Bildern in CSS3? CSS3-Filterimplementierung (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1384
52
Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)
Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.
Praxisleitfaden zur C++-Bildverarbeitung: Implementieren von Bildspezialeffekten und -filtern
Nov 27, 2023 am 11:40 AM
In den Bereichen Informatik und Bildverarbeitung ist C++ seit jeher eine der am häufigsten verwendeten Programmiersprachen. Die Bildverarbeitung ist einer der wichtigen Teilbereiche des Computer Vision, einschließlich Bildanalyse, -verarbeitung und -erkennung. In diesem Artikel werden einige grundlegende Konzepte und Techniken der C++-Bildverarbeitung vorgestellt und einige Beispielcodes zum Implementieren von Bildspezialeffekten und Filtern bereitgestellt, um den Lesern zu helfen, die C++-Bildverarbeitung besser zu verstehen und zu üben. 1. Grundlagen der C++-Bildverarbeitung 1.1 Häufig verwendete Bilddateiformate Bei der Bildverarbeitung müssen wir normalerweise verschiedene Bilddateiformate verwenden, darunter
Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code).
Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!
So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
Jun 01, 2022 pm 07:15 PM
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.
So implementieren Sie Spitzenränder in CSS3
Sep 16, 2022 pm 07:11 PM
In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".
Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind!
Jun 10, 2022 pm 01:00 PM
Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.
So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3
Apr 25, 2022 pm 04:52 PM
Implementierungsmethode: 1. Verwenden Sie den Selektor „:active“, um den Status des Mausklicks auf das Bild auszuwählen. 2. Verwenden Sie das Transformationsattribut und die Funktion „scale()“, um den Bildvergrößerungseffekt zu erzielen. Die Syntax „img:active {transform : Skala(x-Achsen-Vergrößerung, y-Achsen-Vergrößerung);}".
Finden Sie einen anderen Weg! Erfahren Sie, wie Sie mit CSS-Filtern abgerundete Ecken und Welleneffekte erzeugen
Oct 18, 2022 pm 08:21 PM
Dieser Artikel führt Sie durch einen anderen Ansatz und erläutert, wie Sie mit CSS-Filtern abgerundete Ecken erstellen und wie Sie mit abgerundeten Ecken einen Welleneffekt erzielen.
