불투명 유리를 만들기 위해 CSS3를 사용하는 그래픽 예 공유-HTML 튜토리얼-php.cn

불투명 유리를 만들기 위해 CSS3를 사용하는 그래픽 예 공유

零下一度

풀어 주다： 2017-06-24 14:27:12

원래의

1580명이 탐색했습니다.

요즘 바쁜 일정을 쉬면서 멋진 효과들을 많이 보고 있어요. 현재 jquery를 기반으로 한 플러그인이 많이 있지만 많은 플러그인의 호환성이 그다지 좋지 않으므로 기본 플러그인을 사용하는 것이 좋습니다. 일상생활에서 젖빛유리는 더 이상 흔하지 않습니다. 아니요, 여기 젖빛 유리가 있습니다.

하하, 더 이상 잡담하지 마세요. 본론으로 들어가죠. 먼저 최종 효과를 살펴보겠습니다.

음, 좋습니다. 시작해 보겠습니다.

첫 번째 단계: 페이지 기본 구성:

본문에 큰 배경 이미지를 설정하고 중간에 div를 설정합니다. html 코드는 다음과 같습니다.

<body>
<div >
    iPhone 7 dramatically improves the most important aspects of the iPhone experience. It introduces advanced new camera systems. The best performance and battery life ever in an iPhone. Immersive stereo speakers. The brightest, most colorful iPhone display. Splash and water resistance.1 And it looks every bit as powerful as it is. This is iPhone 7.
</div>
</body>

로그인 후 복사

대부분의 텍스트는 다음과 같습니다. div를 열어서 만들면 효과가 더 확실해집니다

CSS 코드는 다음과 같습니다.

   body {
            min-height: 100vh;
            box-sizing: border-box;
            margin: 0;
            padding-top: calc(50vh - 6em);
            font: 150%/1.6 serif;
            background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center;
            background-size: cover;
        }
        div {
            margin: 0 auto;
            padding: 1em;
            max-width: 30em;
            border-radius: 0.3em;
            box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
            0 .5em 1em rgba(0, 0, 0, 0.6);
            text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
            background: hsla(0,0%,100%,.3);
        }

로그인 후 복사

위의 스타일 코드를 보면 본문에서 vh는 뷰포트 크기이고 100은 100%입니다. 배경은 고정 위치로 설정되어 div의 전체 요소를 덮고 중앙에 배경 색상을 설정한 다음 상자 스타일을 설정하면 다음과 같습니다.

밝고 작은 투명 유리가 나옵니다. 그럼 반투명 유리 처리를 시작하겠습니다

2단계: 흐린 배경 반투명 유리 설정

CSS에는 동일한 흐림 설정이 있는데, 이는

filter: Blur(20px);

뒤에 있는 값이 흐림입니다. 값이 클수록 흐려지지만 현재는 px만 지원됩니다.

이 스타일은 하위 div를 흐리게 만들기 때문에 div에 직접 추가할 수 없습니다. 이번에는 의사 요소, 즉::before를 사용할 수 있습니다.

의사 요소를 사용하기 전에 먼저 div에 상대 위치를 추가해야 합니다. 왜냐하면 의사 요소는 블러를 사용한 후 전체 div 상자에 오버플로되기 때문입니다. 아름답고 고급스러워지려면 overflow: Hidden을 div에 추가해야 합니다. 즉:

  overflow: hidden;
  position: relative;

로그인 후 복사

div의 의사 요소:

   div::before{
            content: &#39;&#39;;
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: -1;
            filter: blur(20px);
            margin: -20px;
            background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center;
            background-size: cover;
        }

로그인 후 복사

　 위의 CSS 코드에서 다음을 볼 수 있습니다. 블러 설정은 div와 겹치고 배경 이미지는 본문과 동일합니다.