기본 젖빛 유리 효과를 달성하기 위한 순수 CSS(코드 예)-CSS 튜토리얼-php.cn

기본 젖빛 유리 효과를 달성하기 위한 순수 CSS(코드 예)

不言

풀어 주다： 2018-11-27 16:27:02

앞으로

3658명이 탐색했습니다.

이 글의 내용은 순수 CSS를 사용하여 기본 젖빛 유리 효과(코드 예제)를 구현하는 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

젖빛 유리 배경은 매우 일반적인 웹페이지 스타일로 구현하기 어렵지 않습니다. 그러나 인터넷에서 검색한 결과 구현 방법 중 상당수가 상대적으로 불규칙하고 문제를 복잡하게 만드는 것으로 나타났습니다. 인덱스 속성 및 위치 위치 지정)

이제 우리는 W3Schools

HTML 부분

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>FrostedGlass</title>
    <link rel="stylesheet" href="frostedGlass.css">
  </head>
  <body>
    <div>
      <div>
        <p>this is FrostedGlass</p>
      </div>
    </div>
  </body>
</html>

로그인 후 복사

.mainHolder가 메인 프레임
.textHolder가 젖빛 유리 영역에서 개선된 매우 간단한 코드와 우수한 구현 결과를 갖춘 구현 솔루션을 제공합니다.
.p는 젖빛 유리 위에 떠 있는 텍스트 내용입니다

CSS 부분

* {
  box-sizing: border-box;
}
.mainHolder {
  width: 600px;
  height: 600px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  position: relative;
}
.textHolder {
  width: 100%;
  height: 200px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: inherit;
  overflow: hidden;
}
.textHolder::before {
  content: '';
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  background-attachment: fixed;
  filter: blur(4px);
}
.textHolder::after {
  content: "";
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.25);
}
p {
  z-index: 1;
  color: white;
  position: relative;
  margin: 0;
}

로그인 후 복사

젖빛 유리 효과의 핵심 문제 해결: 흐림 효과는 의사 요소::after 및 ::before를 사용하여 글꼴에 영향을 줄 수 없습니다
p 태그의 position 속성은 주목할 가치가 있습니다. 상대값으로 설정하면 p가 차단 상태에서 "해제"됩니다.
또한 브라우저 코어에 따라 필터 작성 방법이 약간 다릅니다.

위 내용은 기본 젖빛 유리 효과를 달성하기 위한 순수 CSS(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!