suchen

Heim >tägliche Programmierung >CSS-Kenntnisse >CSS legt fest, dass das Hintergrundbild verschwommen ist und der Inhalt nicht verschwommen ist

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

卡哇伊
卡哇伊Original
2020-07-15 17:18:1710980Durchsuche

CSS legt fest, dass das Hintergrundbild verschwommen ist und der Inhalt nicht verschwommen istVoraussetzung: 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>

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>

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>

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>

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!

css html .net background https
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：Erfahren Sie in drei Minuten mehr über das Z-Index-Attribut in CSSNächster Artikel：Erfahren Sie in drei Minuten mehr über das Z-Index-Attribut in CSS

In Verbindung stehende Artikel

Mehr sehen