CSS에서 흐린 배경 효과를 얻는 방법-CSS 튜토리얼-php.cn

CSS에서 흐린 배경 효과를 얻는 방법

王林

풀어 주다： 2020-07-04 17:59:29

앞으로

4143명이 탐색했습니다.

CSS에서 흐린 배경 효과를 얻는 방법

일반 배경 흐림

(추천 튜토리얼: css 빠른 시작)

미를 위해 배경 앞의 텍스트는 흐리게 할 수 없으며 필터 속성은 전체 div 하위 항목을 만듭니다. 흰색 가장자리가 나타납니다. 즉, 이 효과를 얻을 수 없습니다. 무엇을 해야 할까요? 의사 요소를 사용하면 흰색 가장자리 문제도 해결할 수 있습니다.

구현 아이디어:

상위 컨테이너에 배경을 설정하고 상대 위치 지정을 사용하여 의사 요소의 겹침을 용이하게 합니다. :after에서는 배경을 상속하고, 흐림을 설정하고, 상위 요소를 덮도록 절대적으로 위치 지정하기만 하면 됩니다. 이렇게 하면 상위 컨테이너의 하위 요소가 흐림의 영향을 받지 않습니다. 의사 요소의 흐릿함은 상위 요소의 자손에게 상속될 수 없기 때문입니다.

html 레이아웃

<div class="bg">
   <div class="drag">like window</div>
</div>

로그인 후 복사

css 코드:

/*背景模糊*/
.bg{
    width:100%;
    height:100%;
    position: relative;
    background: url("../image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
    z-index:1;
}
.bg:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(2px);
    z-index: 2;
}
.drag{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:200px;
    height:200px;
    text-align: center;

    z-index:11;
}

로그인 후 복사

물론 위 코드를 읽은 후 상위 컨테이너 아래의 하위 요소도 절대 위치 지정을 사용해야 한다는 것을 알 수 있지만 이는 후속 레이아웃에 영향을 미치지 않습니다. . 그러니 마음껏 사용해 주세요. 주의해야 할 점은 Z-인덱스를 사용하여 계층 관계를 결정하려면 하위 요소(즉, 여기에서는 드래그)가 맨 위에 있는지 확인해야 한다는 것입니다. 그렇지 않으면 하위 요소의 텍스트가 표시되지 않습니다.

효과:

CSS에서 흐린 배경 효과를 얻는 방법

배경 부분 흐리기

이전 효과에 비해 배경 부분 흐리기는 비교적 간단합니다. 이때 상위 요소는 의사 요소를 흐릿하게 설정할 필요가 전혀 없습니다. 위 코드와 직접적으로 유사하게, 자식 요소는 흐려지지만 자식 요소의 자손은 흐려지지 않을 수 있습니다. 해결 방법은 이전 효과에서 설명한 것과 같습니다.

HTML 레이아웃:

<div class="bg">
   <div class="drag">
        <div>like window</div>
   </div>
</div>

로그인 후 복사

css 코드:

/*背景局部模糊*/
.bg{
    width:100%;
    height:100%;
    background: url("../image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
    z-index:1;
}
.drag{
    margin:100px auto;
    width:200px;
    height:200px;

    background: inherit;

    position: relative;
}
.drag >div{
    width:100%;
    height: 100%;
    text-align: center;
    line-height:200px;
    position: absolute;
    left:0;
    top:0;
    z-index: 11;
}
.drag:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(15px);/*为了模糊更明显，调高模糊度*/
    z-index: 2;
}

로그인 후 복사

효과는 다음과 같습니다.

CSS에서 흐린 배경 효과를 얻는 방법

배경이 부분적으로 투명합니다.

배경이 부분적으로 투명합니다. 이 효과는 간단하지도 어렵지도 않습니다. 핵심은 background:inherit 속성을 적용하는 것입니다. 여기서는 변환을 사용하여 수직으로 중앙에 배치할 수 없습니다. 플렉스 레이아웃을 선택해야 합니다. 여기서 변환 속성을 사용하면 배경도 오프셋됩니다. 이런 식으로 국소적인 명확한 효과는 없습니다.

html 레이아웃은 위와 동일합니다.

css 코드:

/*背景局部清晰*/
.bg{
    width:100%;
    height:100%;
    position: relative;
    background: url("../image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
}
.bg:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(3px);
    z-index: 1;
}
.drag{
    position: absolute;
    left:40%;
    top:30%;
    /*transform: translate(-50%,-50%);*/
    width:200px;
    height:200px;
    text-align: center;

    background: inherit;
    z-index:11;

    box-shadow:  0 0 10px 6px rgba(0,0,0,.5);
}

로그인 후 복사

효과:

CSS에서 흐린 배경 효과를 얻는 방법