Ein Beispiel für das Hinzufügen eines Milchglas-Unschärfeeffekts zu einem Bild mithilfe des CSS3-Filterattributs-CSS-Tutorial-php.cn

Zeichnen Sie die Verarbeitung des Bildunschärfeeffekts im Projekt auf. Anforderungen: Das Hintergrundbild muss über das img-Tag übergeben werden und der Avatar muss kreisförmig sein

Beispielbild:

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

HTML-Code:

<div class="introBox">
    <!--个人头像-->
    <div class="imgShow">
        <img class="imgBground" src="resources/images/1.jpg" alt="">
        <ul class="details">
            <li class="smallImg">
                <img class="roundImg" src="resources/images/1.jpg" alt="">
            </li>
            <li><p class="uname">吕良伟</p></li>
            <li><p class="cellPhone">13218888888</p></li>
        </ul>
    </div>
</div>

Nach dem Login kopieren

CSS-Code:

/*背景图模糊效果*/
.imgBground{
    width:100%;
    height:28vh;
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    -webkit-filter: blur(5px); /* Chrome, Opera */
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false); /* IE6~IE9 */
}
.details{position:absolute; left:0; right:0; top:8%; margin:auto;}/*调整个人信息的位置*/
.smallImg{width:100px; height:100px; margin:2% auto; overflow:hidden;}
/*把头像处理成圆形*/
.roundImg{display:block;width:100px; height:100px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}

Nach dem Login kopieren

Über das CSS3-Filterattribut wird es im Handbuch folgendermaßen eingeführt

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

Helligkeit

Der Helligkeitsfilter wird verwendet, um die Helligkeit des Bildes zu steuern. Der akzeptierte Wert des Parameters ist größer oder gleich 0. 0 % bedeutet, dass die Ausgabe erfolgt reines Schwarz und 100 % der Ausgabe ist Wenn die ursprüngliche Helligkeit des Bildes größer als 100 % ist, kann die Helligkeit des Bildes erhöht werden, z. B. 150 %, was bedeutet, dass die Helligkeit um das 1,5-fache erhöht wird

HTML:

<div id="container">
    <img class="imgA" src="images/1.jpeg" alt="">
    <img class="imgB" src="images/1.jpeg" alt="">
</div>

Nach dem Login kopieren

CSS:

#container{width:600px; height:800px;}
#container img{width:200px;}
.imgB{
    filter:brightness(150%); /*firefox*/
    -webkit-filter:brightness(150%);/*chrome, safari, opera*/
}

Nach dem Login kopieren

Rendering (unterstützt Chrome, Firefox, Opera, Safari, unterstützt keine Version von IE)

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

Kontrast Kontrast

Kontrastfilter wird verwendet. Steuert den Kontrast eines Bildes. Wie der Helligkeitsfilter akzeptiert der Parameter Werte größer oder gleich 0. Dieser Filter steuert den Unterschied zwischen die dunklen und hellen Teile des CSS-Bildes. Daher ist die Einstellung 0 % grau, 100 % ist das Originalbild und mehr als 100 % verbessert den Kontrast des Bildes weiter

CSS:

.imgA{
    filter:contrast(80%);
    -webkit-filter:contrast(80%);
}
.imgB{
    filter:contrast(150%);
    -webkit-filter:contrast(150%);
}

Nach dem Login kopieren

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

Graustufen-Graustufen

Der Graustufenfilter wird verwendet, um die Graustufen des Bildes zu steuern. Dieser Filter wandelt alle Farben in unserem Bild schrittweise in einige Graustufen um und hat keine Auswirkung Bei 100 % wird es vollständig grau, negative Werte sind nicht zulässig

CSS:

.imgA{
    filter:grayscale(30%); /*firefox*/
    -webkit-filter:grayscale(30%);/*chrome, safari, opera*/
}
.imgB{
    filter:grayscale(80%); /*firefox*/
    -webkit-filter:grayscale(80%);/*chrome, safari, opera*/
}

Nach dem Login kopieren

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

Saturate Saturate

Sättigungsfilter steuert die Farbsättigung des Bildes. Bei der Einstellung 0 % werden alle Farben vollständig aus dem Bild entfernt. Bei der Einstellung 100 % wird das Bild wie das Originalbild aussehen, während bei über 100 % das Bild gesättigt wird. Negative Werte sind nicht zulässig

CSS:

.imgA{
    filter:saturate(30%); /*firefox*/
    -webkit-filter:saturate(30%);/*chrome, safari, opera*/
}
.imgB{
    filter:saturate(150%); /*firefox*/
    -webkit-filter:saturate(150%);/*chrome, safari, opera*/
}

Nach dem Login kopieren

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

Brown Sepia

Der Sepia-Filter wird verwendet, um den Braunton des Bildes zu steuern, d. h um das Bild an einen alten Fotoeffekt im Retro-Stil anzupassen. Stellen Sie 0 % als Originalbild und 100 % als alten Fotoeffekt ein.

CSS:

.imgA{
    filter:sepia(50%); /*firefox*/
    -webkit-filter:sepia(50%);/*chrome, safari, opera*/
}
.imgB{
    filter:sepia(100%); /*firefox*/
    -webkit-filter:sepia(100%);/*chrome, safari, opera*/
}

Nach dem Login kopieren

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

Farbton drehen

Der Filter „Farbton drehen“ wendet die Farbtonrotation auf alle Farben des Bildes an. Bei der Einstellung 0 Grad gibt es keinen Maximalwert. Wenn der Wert 360 Grad überschreitet, entspricht dies einem Zyklus. Das heißt, die Einstellung des Werts 90 Grad und 450 Grad ist die gleiche CSS:

.imgA{
    filter:hue-rotate(90deg); /*firefox*/
    -webkit-filter:hue-rotate(90deg);/*chrome, safari, opera*/
}
.imgB{
    filter:hue-rotate(150deg); /*firefox*/
    -webkit-filter:hue-rotate(150deg);/*chrome, safari, opera*/
}

Nach dem Login kopieren

css3 filter属性给图片添加毛玻璃模糊效果实例介绍 Invertieren

Der Grad der Invertierung hängt vom eingestellten Wert ab %, es gibt keine Invertierung, und wenn die Zeit auf 100 % eingestellt ist, invertieren Sie alle Farben

CSS:

.imgA{
    filter:invert(60%); /*firefox*/
    -webkit-filter:invert(60%);/*chrome, safari, opera*/
}
.imgB{
    filter:invert(90%); /*firefox*/
    -webkit-filter:invert(90%);/*chrome, safari, opera*/
}

Nach dem Login kopieren

css3 filter属性给图片添加毛玻璃模糊效果实例介绍 Unschärfe

Der Unschärfefilter eignet sich für Gaußsche Unschärfe. Ein Bild, das Farben miteinander vermischt und an den Bildrändern verteilt. Der an diesen Filter übergebene Radiusparameter bestimmt, um wie viele Pixel auf dem Bildschirm die Mischung erweitert wird. Je größer der Wert, desto deutlicher ist der Unschärfeeffekt. Dieser Filter kann jeden Längenwert akzeptieren, außer Prozent

CSS:

.imgA{
    filter:blur(1px); /*firefox*/
    -webkit-filter:blur(1px);/*chrome, safari, opera*/
}
.imgB{
    filter:blur(0.5em); /*firefox*/
    -webkit-filter:blur(0.5em);/*chrome, safari, opera*/
}

Nach dem Login kopieren

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

透明度Opacity

Opacity滤镜使图像变透明，取值0%时，完全透明；取值100%时，完全不透明。这个滤镜跟已知的opacity属性相似，唯一的区别就是性能，opacity滤镜属性在支持硬件加速的浏览器上性能会更好

CSS：

.imgA{
    filter:opacity(25%); /*firefox*/
    -webkit-filter:opacity(25%);/*chrome, safari, opera*/
}
.imgB{
    filter:opacity(75%); /*firefox*/
    -webkit-filter:opacity(75%);/*chrome, safari, opera*/
}

Nach dem Login kopieren

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

阴影Drop Shadow

Drop Shadow滤镜增加了一个阴影效果，此属性需要X和Y的偏移，以及隐隐的颜色，也可以设置一个模糊半径

CSS：

.imgA{
    filter:drop-shadow(5px 5px 10px #666); /*firefox*/
    -webkit-filter:drop-shadow(5px 5px 10px #666);/*chrome, safari, opera*/
}
.imgB{
    filter:drop-shadow(10px 10px 10px #eee); /*firefox*/
    -webkit-filter:drop-shadow(10px 10px 10px #eee);/*chrome, safari, opera*/
}

Nach dem Login kopieren

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

URL()

虽然我们讨论过的所有的滤镜非常有用，他们其实是通用的滤镜，但是你的项目可能需要更多的效果，如果上面滤镜没有能满足你的要求的，你可以创建自己的SVG滤镜然后使用其id通过url()引用。

HTML:

<div id="container">
    <img class="imgA" src="images/1.jpeg" alt="">
    <img class="imgB" src="images/1.jpeg" alt="">
</div>

Nach dem Login kopieren

CSS:

.imgA{
    filter: url(&#39;#greenish&#39;);
    -webkit-filter: url(&#39;#greenish&#39;);
}
.imgB{
    filter:url(&#39;#bluish&#39;);
    -webkit-filter: url(&#39;#bluish&#39;);
}

Nach dem Login kopieren

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

组合滤镜和动画滤镜(Combining and Animating Filters)

您也可以组合多个滤镜来获得各种效果。在大多数情况下，滤镜的顺序并没有多大关系。但是如果在灰度滤镜后再加上一个褐色滤镜，还是会显示一个灰度图像。

CSS:

.imgB{
    -webkit-animation: haunted 3s infinite;
    animation: haunted 3s infinite;
}
 
@keyframes haunted {
    0% {
        -webkit-filter: brightness(20%);
        filter: brightness(20%);
    }
    48% {
        -webkit-filter: brightness(20%);
        filter: brightness(20%);
    }
    50% {
        -webkit-filter: sepia(1) contrast(2) brightness(200%);
        filter: sepia(1) contrast(2) brightness(200%);
    }
    60% {
        -webkit-filter: sepia(1) contrast(2) brightness(200%);
        filter: sepia(1) contrast(2) brightness(200%);
    }
    62% {
        -webkit-filter: brightness(20%);
        filter: brightness(20%);
    }
    96% {
        -webkit-filter: brightness(20%);
        filter: brightness(20%);
    }
    96% {
        -webkit-filter: brightness(400%);
        filter: brightness(400%);
    }

Nach dem Login kopieren

css3 filter属性给图片添加毛玻璃模糊效果实例介绍

（有动态效果，但是截图的缘故，只能看静态的了）

Das obige ist der detaillierte Inhalt vonEin Beispiel für das Hinzufügen eines Milchglas-Unschärfeeffekts zu einem Bild mithilfe des CSS3-Filterattributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!