div에 흐리게 유지하는 방법은 무엇입니까?

나는 앨범 아트가 전면에 보이고 다른 모든 요소 뒤에 배경으로 흐려진이 뮤직 플레이어가 있습니다. See image div에 흐리게 유지하는 방법은 무엇입니까?

이미지에 표시된대로 그 흐림이 컨테이너 너머로 확대되는 것을 원하지 않습니다. 배경 앨범 순간에

내 CSS는 다음과 같이보고한다 : 더 이상 정보가 필요

box-shadow: 0 10px 150px rgba(0, 0, 0, .3) inset; 
 
-webkit-filter: blur(30px); 
 
-moz-filter: blur(30px); 
 
-o-filter: blur(30px); 
 
-ms-filter: blur(30px); 
 
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='30'); 
 
filter: blur(30px); 
 
object-fit:cover;

경우 알려주세요.

출처

2017-04-06 Johnson14

가능한 중복 (http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image) –

오버플로 추가 : 숨김 –

Balaj Marius - 나는 그것을 시도했지만 보이지 않습니다. 도움. – Johnson14

나를 위해. img을 사용하고 절대 위치를 사용하십시오. 부모를 width : 100 %로 채 웁니다.

참고 : 부모 요소가 position: relative 및 overflow: hidden을 가져야한다

body { 
 
    padding: 20px; } 
 

 
.player { 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    height: 300px; 
 
    width: 600px; 
 
    overflow: hidden; 
 
    border-radius: 5px; } 
 
    
 
.player img { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    filter: blur(10px); } 
 
    
 
.player .container { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0,0,0,0.7); }

<div class="player"> 
 
    <img src="http://2.bp.blogspot.com/-S0n9Rq5kIZg/VpKvLN1EyoI/AAAAAAAAAT8/B6kEp6sRTH4/s1600/dewapoker.jpg" /> 
 
    <div class="container"> 
 
</div>

[배경 이미지로 CSS 3 흐림 필터를 적용하는 방법]의

출처

2017-04-06 06:05:08

백그라운드 클래스가 아닌 컨테이너에 "오버플로 : 숨김"을 삽입하면 작동하는 것처럼 보였습니다. 건배! – Johnson14

div에 흐리게 유지하는 방법은 무엇입니까?

답변

관련 문제