Erstellen Sie mit CSS schnell erweiterte, verschwommene Hintergrundbilder-CSS-Tutorial-php.cn

Erstellen Sie mit CSS schnell erweiterte, verschwommene Hintergrundbilder

藏色散人

Freigeben： 2021-08-19 11:24:31

Original

2503 Leute haben es durchsucht

Möchten Sie, dass Ihre Webseite hochwertig aussieht? Möchten Sie die Anzahl der Lesebesuche auf Ihrer Webseite erhöhen? Möchten Sie, dass Ihre Nutzer auf den ersten Blick auf Ihre Seite aufmerksam werden? Dann verpassen Sie diesen Artikel nicht! Schließlich kann jeder lernen, wie man einfach und schnell ein hochwertiges, unscharfes Hintergrundbild erstellt!

Beginnen wir ohne weitere Umschweife mit dem Haupttext!

Wie der Titel schon sagt, stellen wir Ihnen heute vor, mithilfe von CSS ein unscharfes Hintergrundbild zu erstellen, das für den Hintergrund Ihrer persönlichen Blog-Seite und Website geeignet ist.

Ich werde den folgenden Code direkt hinzufügen:

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title></title>
<style>
    body, html {
        height: 100%;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .bg-image {
        /* 所使用的图像 */
        background-image: url("001.jpg");

        /* 添加模糊效果 */
        filter: blur(8px);
        -webkit-filter: blur(8px);

        /* 完整的高度 */
        height: 100%;

        /* 中心和缩放图像*/
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    /* 将文本放置在页面/图像的中间 */
    .bg-text {
        background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0, 0.4); 
        color: white;
        font-weight: bold;
        border: 3px solid #f1f1f1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 80%;
        padding: 20px;
        text-align: center;
    }
</style>

</head>
<body>
<div class="bg-image"></div>
<div class="bg-text">
    <h2>欢迎来到</h2>
    <h1 style="font-size:50px">虚拟现实</h1>
    <p>一切都是虚拟的，但感觉还是真实</p>
</div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie im Bild unten gezeigt:

Erstellen Sie mit CSS schnell erweiterte, verschwommene Hintergrundbilder

(Das Hintergrundbild stammt aus dem Internet, Entschuldigung für den Verstoß)

Wie wäre es damit? ! Ist der Effekt nicht toll!

Im obigen Code werde ich Ihnen einige wichtige CSS-Attribute vorstellen:

filter Attribut definiert den visuellen Effekt (wie Unschärfe und Sättigung) des Elements (normalerweise Erstellen Sie mit CSS schnell erweiterte, verschwommene Hintergrundbilder ) Ausgeben). filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

注：旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

border简写属性在一个声明设置所有的边框属性。

border-width：规定边框的宽度。
border-style：规定边框的样式。
border-color：规定边框的颜色。
inherit：规定应该从父元素继承 border 属性的设置。

Nach dem Login kopieren

background

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 Opazitätsattribut.

Das Attribut transform wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.

border-Kurzschrifteigenschaft legt alle Randeigenschaften in einer Deklaration fest. Die Kurzschrifteigenschaft 🎜

background-color：规定要使用的背景颜色。	
background-position：规定背景图像的位置。	
background-size：规定背景图片的尺寸。	
background-repeat：规定如何重复背景图像。
background-origin：规定背景图片的定位区域。	
background-clip：规定背景的绘制区域。	
background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。	
background-image：规定要使用的背景图像。	
inherit：规定应该从父元素继承 background 属性的设置。

Nach dem Login kopieren

🎜background legt alle Hintergrundeigenschaften in einer Deklaration fest. 🎜rrreee🎜Die chinesische PHP-Website-Plattform verfügt über viele Video-Lehrressourcen. Jeder ist herzlich willkommen, das „🎜CSS-Video-Tutorial🎜“ zu lernen! 🎜

Das obige ist der detaillierte Inhalt vonErstellen Sie mit CSS schnell erweiterte, verschwommene Hintergrundbilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!