"흐림"이있는 머리글에서 이미지 사용

배경 이미지를 흐리게 만들려고합니다. 그 위에 텍스트, 단추가 있어야합니다. 그러나 흐림 효과는 텍스트와 단추를 흐리게 처리하고 있습니다. 둘을 분리하는 방법. 당신은 내용에 영향을주지 않고 배경 컨테이너의 스타일을 할 수 있도록 "흐림"이있는 머리글에서 이미지 사용

header { 
 
    background: url("street-238458.jpg") no-repeat center; 
 
    -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */ 
 
    filter: blur(5px); 
 
    background-size: 100% 100%; 
 
    height: 630px; 
 
}

<header> 
 

 
<div class="container-fluid"> 
 
<div class="text-center"> 
 
<h1 class="heading">My h1 is here... blah blah</h1> 
 
<p>We help people out, every day.</p> 
 
<button class="btn btn-lg btn-danger heading" href="#">This is the button</button> 
 
</div> 
 
</div> 
 

 
</header>

는

출처

2017-12-28 Matt1966

친절이를 참조하십시오 https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image를 당신은 분리 할 수 –

헤더를 2 부분, 배경 부분 및 내용 부분으로 분리합니다. 그런 다음 배경을 흐리게 처리 할 수 있습니다. –

가능한 [배경 이미지에 CSS 3 흐림 효과 필터 적용 방법] (https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a) -배경 이미지) – Kaiido

당신은 당신의 헤더에 대한 2 개 개의 다른 용기를 가질 수 있습니다. 의견에서 참조를 확인하십시오.

출처

2017-12-28 04:16:41

이 pen은 사용자가 원하는 것이어야합니다. 해당 소유자의 신용. 트릭은 두 개의 개별 컨테이너를 갖는 것이고 외부 컨테이너에는 배경 이미지가 있어야합니다.

.content:before { 
    content: ""; 
    position: fixed; 
    left: 0; 
    right: 0; 
    z-index: -1; 

    display: block; 
    background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG'); 
    width: 1200px; 
    height: 800px; 

    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
}

출처

2017-12-28 04:17:55

"흐림"이있는 머리글에서 이미지 사용

답변

관련 문제