CSS legt fest, dass das Hintergrundbild verschwommen ist und der Inhalt nicht verschwommen ist-CSS-Kenntnisse-php.cn

CSS legt fest, dass das Hintergrundbild verschwommen ist und der Inhalt nicht verschwommen ist

卡哇伊

Freigeben： 2020-07-15 17:25:52

Original

11012 Leute haben es durchsucht

CSS legt fest, dass das Hintergrundbild verschwommen ist und der Inhalt nicht verschwommen ist Voraussetzung: Ein p hat den Hintergrund festgelegt: URL Jetzt ist es notwendig, den Hintergrund des Bildes zu verwischen und den Text innerhalb des p deutlich anzuzeigen.

Originalcode:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url(&#39;1.jpg&#39;);            background-repeat: no-repeat;            background-position: center;            background-size: cover;            height:600px;            text-align: center;            line-height: 600px;        }
    </style></head><body><p class="bg">
    <p class="content">我是内容</p></p></body></html>

Nach dem Login kopieren

Originaleffekt:
CSS legt fest, dass das Hintergrundbild verschwommen ist und der Inhalt nicht verschwommen ist

Lösung: Der Inhalt und das Bild werden jeweils in einem p platziert und die Hintergrundunschärfe wird eingestellt Legen Sie über CSS die absolute Position des Inhalts p fest.

HTML-Code:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url(&#39;1.jpg&#39;);            height:600px;            text-align: center;            line-height: 600px;        }
        .bg-blur {            float: left;            width: 100%;            background-repeat: no-repeat;            background-position: center;            background-size: cover;            -webkit-filter: blur(15px);            -moz-filter: blur(15px);            -o-filter: blur(15px);            -ms-filter: blur(15px);            filter: blur(15px);        }
        .content-front {          position:absolute;          left: 10px;          right: 10px;          height:600px;          line-height: 600px;          text-align: center;        }

    </style></head><body>
    <p>
        <p class="bg bg-blur"></p>
        <p class="content content-front">我是内容</p>
    </p></p></body></html>

Nach dem Login kopieren

Effekt:
CSS legt fest, dass das Hintergrundbild verschwommen ist und der Inhalt nicht verschwommen ist

Anforderungen: Für ein p ist ein Hintergrund festgelegt: Jetzt ist es notwendig, den Hintergrund des Bildes zu verwischen und den Text innerhalb des p deutlich anzuzeigen.

Originalcode:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url(&#39;1.jpg&#39;);            background-repeat: no-repeat;            background-position: center;            background-size: cover;            height:600px;            text-align: center;            line-height: 600px;        }
    </style></head><body><p class="bg">
    <p class="content">我是内容</p></p></body></html>

Nach dem Login kopieren

Originaleffekt:
CSS legt fest, dass das Hintergrundbild verschwommen ist und der Inhalt nicht verschwommen ist

Lösung: Der Inhalt und das Bild werden jeweils in einem p platziert und die Hintergrundunschärfe wird eingestellt Legen Sie über CSS die absolute Position des Inhalts p fest.

HTML-Code:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url(&#39;1.jpg&#39;);            height:600px;            text-align: center;            line-height: 600px;        }
        .bg-blur {            float: left;            width: 100%;            background-repeat: no-repeat;            background-position: center;            background-size: cover;            -webkit-filter: blur(15px);            -moz-filter: blur(15px);            -o-filter: blur(15px);            -ms-filter: blur(15px);            filter: blur(15px);        }
        .content-front {          position:absolute;          left: 10px;          right: 10px;          height:600px;          line-height: 600px;          text-align: center;        }

    </style></head><body>
    <p>
        <p class="bg bg-blur"></p>
        <p class="content content-front">我是内容</p>
    </p></p></body></html>

Nach dem Login kopieren

Wirkung:
CSS legt fest, dass das Hintergrundbild verschwommen ist und der Inhalt nicht verschwommen ist

Vielen Dank fürs Lesen, ich hoffe, Sie werden viel davon profitieren.

Dieser Artikel ist reproduziert von: https://blog.csdn.net/oHeHeHou/article/details/51975539

Empfohlenes Tutorial: "CSS-Tutorial „

Das obige ist der detaillierte Inhalt vonCSS legt fest, dass das Hintergrundbild verschwommen ist und der Inhalt nicht verschwommen ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!