suchen

Heim >Web-Frontend >HTML-Tutorial >CSS3-Filtereffekt

CSS3-Filtereffekt

WBOY
WBOYOriginal
2016-08-04 08:53:141670Durchsuche

Das Bild oben zeigt den Filtereffekt der neuen Funktion von CSS3. Nachdem wir diese gelernt haben, können wir, eine Gruppe großer Web-Leute, die Schönheit und Schönheit lieben, Code perfekt zum Verschönern von Fotos verwenden~~

Okay, sehen wir uns zunächst den weißen Rahmen hinter dem Foto an, 

　　　　<style>　

　　　#div1{

/*Breite, Höhe und Farbe für div definieren*/


Breite: 200px;
Höhe: 250px;
Hintergrund: weiß;

　　　　/*Der innere Abstand zum Foto beträgt 15 Pixel und der Text ist zentriert*/

　　　　　　Abstand: 15 Pixel;

　　　　text-align: center;

/* Drehen Sie den weißen Hintergrund um -10 Grad */

-webkit-transform: rotieren(-10 Grad);

/*Gib dem Hintergrund einen Schatteneffekt*/

box-shadow: 4px 4px 4px #666;
float: left;
float: left;

　　　　</style>　　　　　　　<br />　　　　　　<body><br />　　　　　　　　　<div id="div1">
			<img src="img/001V28Mwty6Fww02IiNad&690.jpg">
			<p>灰色滤镜</p>
		</div><br />　　　　　　</body>
　

Nachdem Sie den weißen Hintergrundrahmen geschrieben haben, ist es Zeit, den Filter anzuwenden

Machen wir zunächst das erste Bild, das Schwarz-Weiß-Bild der Kunst

<span style="color: #000000;">　　　　　　　　#div1 img{

　　　　　　　　</span><span style="color: #008000;">/*</span><span style="color: #008000;">把div1里面的图片百分百，等同于相对于在div1里面百分比放大填充</span><span style="color: #008000;">*/</span><span style="color: #000000;">
　　　　　　　　　　width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;<br></span>
<span>　　　　　　　/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/</span>
<span style="color: #000000;">　　　　　　　　　　</span>-webkit-filter: grayscale(<span style="color: #800080;">1</span><span style="color: #000000;">); 　　　　　　　　　　}</span>
Das zweite Foto, ähm...ein altes Foto.

<span style="color: #000000;">#div1 img{
            width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
            </span>-webkit-filter: sepia(<span style="color: #800080;">1</span><span style="color: #000000;">);
        }</span>

Das dritte Foto, umgekehrte Farbe? Ich bin mir auch nicht sicher, welche Farbe es hat

<span style="color: #000000;">#div1 img{
            width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
            </span>-webkit-filter: hue-<span style="color: #000000;">rotate(200deg);
        }</span>

Das vierte Foto scheint mit einer weißen Nebelschicht bedeckt zu sein

<span style="color: #000000;">#div1 img{
            width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
            </span>-webkit-filter: opacity(<span style="color: #800080;">0.5</span><span style="color: #000000;">);
        }
            </span>

Es gibt ein weiteres Foto, das im Rendering nicht angezeigt wird. Der Unschärfeeffektcode lautet wie folgt

<span style="color: #000000;">#div4 img{
            width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
            </span>-webkit-filter: opacity(<span style="color: #800080;">0.5</span><span style="color: #000000;">);
        }</span>

Okay, ich bin mit dem Teilen meiner Filter fertig und gehe jetzt zu den wunderschönen Bildern

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：Die Safari-Cookie-Einstellung ist auf Chinesisch fehlgeschlagenNächster Artikel：Die Safari-Cookie-Einstellung ist auf Chinesisch fehlgeschlagen

In Verbindung stehende Artikel

Mehr sehen