오버레이를 위해 CSS 글래스/블러 효과가 작동하도록 하려면 어떻게 해야 합니까?
반투명 오버레이 디브에 블러 효과를 적용하는 데 어려움을 겪고 있습니다.디브 뒤에 있는 모든 것들을 흐릿하게 해주세요, 이런 식으로.
여기 작동하지 않는 jsfiddle http://jsfiddle.net/u2y2091z/ 이 있습니다.
어떻게 하면 이 일을 해낼 수 있을까요?이것을 가능한 한 복잡하게 유지하고 크로스 브라우저로 만들고 싶습니다.제가 사용하고 있는 CSS는 다음과 같습니다.
#overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background:black;
background:rgba(0,0,0,0.8);
filter:blur(4px);
-o-filter:blur(4px);
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter:blur(4px);
}
보다 단순하고 최신인 경우 다음과 같이 대답합니다.
backdrop-filter: blur(6px);
참고로 브라우저 지원은 완벽하지 않지만 대부분의 경우 흐리게 하는 것은 필수적이지 않습니다.
여기에 다음을 사용하는 예가 있습니다.svg거름망을 치다
이 아이디어는 다음을 사용하는 것입니다.svg 붙은 height #overlay를 합니다.feGaussianblur. 이 는 ④번 ⑤번 ⑥번 ⑦번 ⑦번 적용됩니다번 이svg image. 를 내기 ⑥ ⑦ 를 당신은 사용할 수 있습니다 위해서 압출 효과를 주기 요소 사용할 a 있습니다 수 use could 당신은 , you to 요소 압출 it give uded an effect extr 효과를를box-shadow가림막 하단에
Demo on Codepen
body {
background: #222222;
}
#container {
position: relative;
width: 450px;
margin: 0 auto;
}
img {
height: 300px;
}
#overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
color: rgba(130, 130, 130, 0.5);
font-size: 50px;
text-align: center;
line-height: 100px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}<div id="container">
<img src="http://lorempixel.com/450/300/sports" />
<div id="overlay">WET</div>
<svg width="450" height="100" viewBox="0 0 450 100" style="position: absolute; top: 0;">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<image filter="url(#blur)" xlink:href="http://lorempixel.com/450/300/sports" x="0" y="0" height="300px" width="450px" />
</svg>
</div>저는 여기 있는 모든 사람들의 정보와 구글링을 종합할 수 있었고, Chrome과 Firefox에서 작동하는 다음과 같은 것들을 생각해 냈습니다. http://jsfiddle.net/xtbmpcsu/ .저는 IE와 오페라를 위해 이 작품을 만드는 일을 계속하고 있습니다.
핵심은 필터가 적용된 디브 안에 내용물을 넣는 것입니다.
body {
background: #300000;
background: linear-gradient(45deg, #300000, #000000, #300000, #000000);
color: white;
}
#mask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
}
img {
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
position: absolute;
left: 100px;
top: 100px;
height: 300px;
width: auto;
}<div id="mask">
<p>Lorem ipsum ...</p>
<img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>그래서 마스크는 필터를 적용했습니다.한이에과을 url()합니다 에 url하는 것에 하십시오.<svg>가치에 대한 태그 -- 그 아이디어는 http://codepen.io/AmeliaBR/pen/xGuBr 에서 나왔습니다.CSS를 최소화할 경우 SVG 필터 마크업의 공백을 "%20"으로 대체해야 할 수도 있습니다.
그래서 이제 마스크 디브 안에 있는 모든 것들이 흐릿해 졌습니다.
background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);
콘텐츠에 흐릿한 배경을 추가하는 대신 배경 필터를 사용할 수 있습니다.FYIIE 11 및 Firefox는 이를 지원하지 않을 수 있습니다.캐니유즈를 확인합니다.
데모:
header {
position: fixed;
width: 100%;
padding: 10px;
background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);
}
body {
margin: 0;
}<header>
Header
</header>
<div>
<img src="https://dummyimage.com/600x400/000/fff" />
<img src="https://dummyimage.com/600x400/000/fff" />
<img src="https://dummyimage.com/600x400/000/fff" />
</div>오늘날 신뢰할 수 있는 크로스 브라우저 접근 방식을 찾고 있다면, 좋은 접근 방식을 찾을 수 없을 것입니다.가장 좋은 방법은 두 개의 이미지(일부 환경에서는 자동화될 수 있음)를 만들고 하나가 다른 이미지와 겹치도록 배열하는 것입니다.아래에 간단한 예를 만들어 보았습니다.
<figure class="js">
<img src="http://i.imgur.com/3oenmve.png" />
<img src="http://i.imgur.com/3oenmve.png?1" class="blur" />
</figure>
figure.js {
position: relative;
width: 250px; height: 250px;
}
figure.js .blur {
top: 0; left: 0;
position: absolute;
clip: rect( 0, 250px, 125px, 0 );
}
효과적이기는 하지만, 이 방법조차도 반드시 이상적인 것은 아닙니다.그렇기는 하지만 원하는 결과를 도출해냅니다.
여기 가능한 해결책이 있습니다.
HTML
<img id="source" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
<div id="crop">
<img id="overlay" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>
CSS
#crop {
overflow: hidden;
position: absolute;
left: 100px;
top: 100px;
width: 450px;
height: 150px;
}
#overlay {
-webkit-filter:blur(4px);
filter:blur(4px);
width: 450px;
}
#source {
height: 300px;
width: auto;
position: absolute;
left: 100px;
top: 100px;
}
CSS가 단순화될 수 있다는 것을 알고 있고 아마 ID를 없애야 할 것입니다.여기서의 아이디어는 디브를 크롭 용기로 사용한 후 이미지를 복제할 때 블러를 적용하는 것입니다.피들
파이어폭스에서 작동하려면 SVG hack을 사용해야 합니다.
From backdrop-filter
...색이 흐려지거나 요소 뒤의 영역으로 색이 이동하는 등의 그래픽 효과를 제공합니다.요소 뒤에 있는 모든 것에 적용되기 때문에 효과를 보려면 요소나 배경을 부분적으로 투명하게 만들어야 합니다.
이렇게 하면 콘텐츠 위에 블러 오버레이가 됩니다.
.blur {
display: block;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
background-color: rgba(0, 0, 0, 0.5);
}
#bg, #search-bg {
background-image: url('https://images.pexels.com/photos/719609/pexels-photo-719609.jpeg?w=940&h=650&auto=compress&cs=tinysrgb');
background-repeat: no-repeat;
background-size: 1080px auto;
}
#bg {
background-position: center top;
padding: 70px 90px 120px 90px;
}
#search-container {
position: relative;
}
#search-bg {
/* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 99;
/* Pull the background 70px higher to the same place as #bg's */
background-position: center -70px;
-webkit-filter: blur(10px);
filter: url('/media/blur.svg#blur');
filter: blur(10px);
}
#search {
/* Put this on top of the blurred layer */
position: relative;
z-index: 100;
padding: 20px;
background: rgb(34,34,34); /* for IE */
background: rgba(34,34,34,0.75);
}
@media (max-width: 600px ) {
#bg { padding: 10px; }
#search-bg { background-position: center -10px; }
}
#search h2, #search h5, #search h5 a { text-align: center; color: #fefefe; font-weight: normal; }
#search h2 { margin-bottom: 50px }
#search h5 { margin-top: 70px }<div id="bg">
<div id="search-container">
<div id="search-bg"></div>
<div id="search">
<h2>Awesome</h2>
<h5><a href="#">How it works »</a></h5>
</div>
</div>
</div>저는 이 해결책을 생각해 냈습니다.
에 있는 아이를 입니다.div 이미지와 합니다.div 나서그에다e에를 합니다.background-attachment:fixed 동일한과 께한background상위 요소에 설정된 속성입니다.
그다음에 신청하세요.filter:blur(10px)(또는 임의의 값).
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.background{
position: relative;
width:100%;
height:100vh;
background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size:cover;
background-position: center;
background-repeat:no-repeat;
}
.blur{
position: absolute;
top:0;
left:0;
width:50%;
height:100%;
background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size:cover;
filter:blur(10px);
transition:filter .5s ease;
backface-visibility: hidden;
}
.background:hover .blur{
filter:blur(0);
}
.text{
display: inline-block;
font-family: sans-serif;
color:white;
font-weight: 600;
text-align: center;
position: relative;
left:25%;
top:50%;
transform:translate(-50%,-50%);
}<head>
<title>Blurry Effect</title>
</head>
<body>
<div class="background">
<div class="blur"></div>
<h1 class="text">This is the <br>blurry side</h1>
</div>
</body>고정 배경에서 작동하는 솔루션은 다음과 같습니다. 고정 배경이 있고 일부 중첩된 요소가 있는데 해당 요소에 대해 블러 처리된 배경이 필요한 경우 이 솔루션이 작동합니다.
간단한 HTML 이미지:
<body> <!-- or any wrapper -->
<div class="content">Some Texts</div>
</body>
.<body>또는 래퍼 요소:
body {
background-image: url(http://placeimg.com/640/360/any);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
예를 들어, 흰색 투명 배경을 가진 오버레이된 요소가 있습니다.
.content {
background-color: rgba(255, 255, 255, 0.3);
position: relative;
}
배경 . 을 는 에도 의 와 를 해야 의 해야 를 와 으로 사용합니다. 나는 그것을 사용합니다.:beforepsuedo-class:
.content:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
filter: blur(5px);
background-image: url(http://placeimg.com/640/360/any);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
고정 배경은 래퍼와 오버레이된 요소 모두에서 동일한 방식으로 작동하기 때문에 오버레이된 요소의 스크롤 위치와 정확히 동일한 배경을 가지고 있으며 단순히 흐리게 할 수 있습니다.Firefox, Chrome, Opera 및 Edge에서 테스트된 작동하는 바이올린입니다. https://jsfiddle.net/0vL2rc4d/
참고: 파이어폭스에는 스크롤할 때 화면이 깜박이게 하는 버그가 있으며 흐릿한 배경이 고정되어 있습니다.만약 해결책이 있다면, 저에게 알려주세요.
제 답변이 늦었다는 것을 알지만, 여기 같은 효과를 얻을 수 있는 더 나은 해결책이 있습니다.이것은 또한 텍스트를 흐릿하게 만들고 크롬, 엣지, 파이어폭스에서도 잘 작동합니다.이 효과를 얻기 위해서는
- 알파가 .8인 RBGA 색상 변수를 부모 디바의 클래스로 사용
- 디브에 블러 효과 적용
- 마지막으로 CSS 전환을 추가합니다.
.myBlur{
background:rgba(252, 245, 235, .8);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
transition: background-color .3s cubic-bezier(.42, .00, .58, 1.00);
}
이 div 아래로 스크롤하는 개체는 자동으로 블러링됩니다.
내가 여기서 어떻게 유용할지 모르겠지만, 거기서 일하는 바이올린이 있습니다. 그건 그렇고 https://jsfiddle.net/dqc59tfg/7/
#overlay {
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(6px);
background:transparent;
background: transparent;
}
body {
background: #300000;
background: linear-gradient(45deg, #300000, #000000, #300000, #000000);
}
img {
height: 100vh;
width: 100vw;
position: absolute;
left: none;
top: none;
}
언급URL : https://stackoverflow.com/questions/27583937/how-can-i-make-a-css-glass-blur-effect-work-for-an-overlay
'programing' 카테고리의 다른 글
| ASP에서 "runAll Managed Modules For All Requests"의 올바른 사용법은 무엇입니까?NET MVC 2/3? (0) | 2023.09.08 |
|---|---|
| iOS7 탭에 UI 버튼이 하이라이트로 표시되지 않음 (0) | 2023.09.08 |
| 텍스트 상자가 이전에 입력한 값으로 자동 채우기 방지 (0) | 2023.09.08 |
| Python을 사용하여 Excel 파일을 실행 (0) | 2023.09.08 |
| Excel 파일 c#에서 새 워크시트를 생성하는 방법은? (0) | 2023.09.08 |