Свойство CSS blur только для background-image

Question

Я пытаюсь применить свойство размытия CSS только к фоновому изображению с id="home", но это также отражается и в классе детей. Мой HTML-код:

<section id="home">    
    <div class="home"> 
     <h1>ncats is an innovative</h1> 
    </div>    
</section> 

Мой CSS код:

#home{ 
    display: block; 
    background:url(../images/2.jpg) no-repeat; 
    background-size: cover; 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
    width: 100%; 
    height: 1080px; 
} 
.home{ 
    text-align:center; 
} 

Я пытаюсь получить выход, как в приведенной ниже ссылке: http://codepen.io/akademy/pen/FlkzB

Но мой выход, как это , вместо этого: http://codepen.io/anon/pen/yyEZOb

Answer 1

Я получил ваш Codepen работать со следующими CSS:

#home:before{ 
    content: ""; /* CHANGE HERE! */ 
    position: absolute; /* CHANGE HERE! */ 
    z-index: -1; /* CHANGE HERE! */ 

    display: block; 
    background:url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat; 
    background-size: cover; 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
    width: 100%; 
    height: 1080px; 
} 
.home{  
    text-align:center; 
    z-index: 0; /* CHANGE HERE! */ 
} 

Добавьте «: перед» псевдо-элемента, чтобы указать, что контент будет вставлен перед элементом, выбранным (#home).

Важным здесь является установление абсолютного значения и изменение z-индексов, так как мы должны выполнить некоторую перестановку элементов.

Более подробную информацию о: до псевдо-элемента

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

Более подробную информацию о Z-индекс:

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

Возможно, вы можете использовать свойство непрозрачности вместо опции webkit-filter:

#home{ 
    display: block; 
    background:url('imageurl') no-repeat; 
    background-size: cover; 

    filter: alpha(opacity=30); 
    -moz-opacity: 0.3; 
    -khtml-opacity: 0.3; 
    opacity: 0.3; 

    width: 100%; 
    height: 1080px; 
} 

Answer 3

Чтобы получить выход вроде codepen вы поделились, вы должны используйте ту же технику и используйте псевдоэлемент, например :before или :after.

Просто измените CSS следующим образом:

#home:before{ 
    content:''; 
    display: block; 
    background:url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat; 
    background-size: cover; 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
    width: 100%; 
    height: 1080px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index:-1; 
} 

Answer 4

На самом деле вы должны понимать блочную структуру HTML дел. Все, что вы примените к родительскому элементу или родительскому подразделению, также применяется к ребенку. Так что, если это ваш код

<div class="parent"> Hi... <div class="child"> i am child </div> </div>

Теперь, если применить CSS фильтр: размытость свойство родительского класса будет слишком влияет на класс ребенка, так как блок родительского класса/дел содержит дочерний класс/дел блок внутри него. Так что все, что вы даете родителям, также принимается ребенком.

Но есть еще способ, как вы можете это сделать: JSFiddle.

Объяснение: Существует один div с дочерним положением, а другой - как отдельный элемент. Этот div получает размытие, поэтому он также будет затронут, но отдельный промежуток не потому, что он не является дочерним элементом этого div.

HTML

<div class="bg"> 
    <span class="inner"> 
    <h1>Hey i am normal text above the Background, and i am "Blur" ! </h1> 
    </span> 
</div> 

    <span class="outer"> 
    <h1>Hey i am normal text above the Background, and i am not "Blur" ! </h1> 
    </span> 

CSS

html, body { 
    color:white; 
    margin:0%; 
    position:relative; 
    background:black; 
} 
.bg { 
    margin:0%; 
    background-image:url(http://upload.wikimedia.org/wikipedia/commons/1/12/Sling-Sat_removing_space_debris.png); 
    background-repeat:no-repeat; 
    background-size:cover; 
    height:100%; 
    width:100%; 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
    z-index:-1; 
} 
.inner { 
    z-index:0; 
    display:block; 
    width:100%; 
    height:100%; 
    position:fixed; 
    top:0%; 
    overflow:auto; 
    text-align:center; 
    -webkit-filter: blur(0px); 
    -moz-filter: blur(0px); 
    -o-filter: blur(0px); 
    -ms-filter: blur(0px); 
    filter: blur(0px); 
} 
.outer { 
    z-index:0; 
    display:block; 
    width:100%; 
    height:100%; 
    position:fixed; 
    top:0%; 
    overflow:auto; 
    text-align:center; 
    padding-top:50px; 
} 

Answer 5

Для будущих читателей (и теперешние, которые не особо заботятся о поддержке кросс-браузер): существует механизм CSS это ровно это.

В спецификации Filter Effects определены фильтры, которые также работают как функциональная нотация , принимая изображение + список фильтров. Синтаксис выглядит следующим образом:

.El { 
    background-image: filter(url(myImage.jpg), blur(5px)); 
} 

... где второй аргумент функции фильтра принимает список фильтров (то же самое, как filter собственности).

К сожалению, только Safari внедрил его до сих пор - он был выпущен как -webkit-filter() в Safari 9, но имел некоторые серьезные ошибки, поэтому они даже не объявили, что он был поддержан. Он исправлен в WebKit с тех пор и будет выпущен в следующей версии Safari (iOS 9.3/Desktop Safari 9.1).