>  기사  >  일일 프로그램  >  CSS는 배경 이미지를 흐릿하게 설정하고 내용은 흐릿하지 않도록 설정합니다.

CSS는 배경 이미지를 흐릿하게 설정하고 내용은 흐릿하지 않도록 설정합니다.

卡哇伊
卡哇伊원래의
2020-07-15 17:18:1710975검색

CSS는 배경 이미지를 흐릿하게 설정하고 내용은 흐릿하지 않도록 설정합니다.요구 사항: A p는 배경: url을 설정했습니다. 이제 이미지의 배경을 흐리게 하고 p 내의 텍스트를 명확하게 표시해야 합니다.

원본 코드:

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

원본 효과:
CSS는 배경 이미지를 흐릿하게 설정하고 내용은 흐릿하지 않도록 설정합니다.

해결 방법: 콘텐츠와 이미지가 각각 p에 배치되고, CSS를 통해 배경 p 흐림을 설정하고, 콘텐츠 p의 절대 위치를 설정합니다.

html 코드:

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

효과:
CSS는 배경 이미지를 흐릿하게 설정하고 내용은 흐릿하지 않도록 설정합니다.

요구 사항: A p가 배경: url을 설정했습니다. 이제 그림의 배경을 흐리게 하고 p 내의 텍스트를 명확하게 표시해야 합니다. .

원본 코드:

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

원본 효과:
CSS는 배경 이미지를 흐릿하게 설정하고 내용은 흐릿하지 않도록 설정합니다.

해결 방법: 콘텐츠와 이미지가 각각 p에 배치되고, CSS를 통해 배경 p 흐림을 설정하고, 콘텐츠 p의 절대 위치를 설정합니다.

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>

Effect:
CSS는 배경 이미지를 흐릿하게 설정하고 내용은 흐릿하지 않도록 설정합니다.

읽어주신 모든 분들께 감사드리며, 많은 혜택 받으시길 바랍니다.

이 기사는 다음에서 복제되었습니다: https://blog.csdn.net/oHeHeHou/article/details/51975539

추천 튜토리얼: "css tutorial"

위 내용은 CSS는 배경 이미지를 흐릿하게 설정하고 내용은 흐릿하지 않도록 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.