CSS3-Filtereffekt-HTML-Tutorial-php.cn

CSS3-Filtereffekt

WBOY

Freigeben： 2016-08-04 08:53:14

Original

1629 Leute haben es durchsucht

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>

Nach dem Login kopieren

　　　#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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

<span>　　　　　　　/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/</span>

Nach dem Login kopieren

<span style="color: #000000;">　　　　　　　　　　</span>-webkit-filter: grayscale(<span style="color: #800080;">1</span><span style="color: #000000;">); 　　　　　　　　　　}</span>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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