CSS filter background images

Question

Я пытаюсь поместить фильтр над фоновым изображением div в код ниже, как это делается на домашней странице http://www.theverge.com/. Честно говоря, я понятия не имею, как обойти это. Это то, что у меня есть:

<a href="#"> 
    <div id="box"></div> 
</a> 

<style> 
    #box{ 
     background-image: url("http://goo.gl/pdyi7R"); 
     background-size: cover; 
     background-position: center center; 
     background-repeat: no-repeat; 
     border: 1px solid; 
     width: 500px; 
     height: 300px; 
     position: relative; 
     opacity: 0.5; 
    } 
    #box:hover { 
     background-color: red; 
     opacity: 5; 
    } 
</style> 

Answer 1

Добавить фильтрующий элемент в вашем ящике с цветом фильтра

<a href="#"> 

    <div id="box"><div id="filter"></div></div> 

    </a> 


    <style> 


#box{ 
    background-image: url("http://goo.gl/pdyi7R"); 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    border: 1px solid; 
    width: 500px; 
    height: 300px; 
    position: relative; 
    opacity: 0.5; 
} 

#filter { 
    width:100%; 
    height:100%; 
    background-color:red; 
    opacity:0.4; 
} 

</style> 

http://jsfiddle.net/9n3ge6r1/

Answer 2

ДИВ является недействительным, поскольку это начальный тег. Если вы не хотите, чтобы панель навигации находилась поверх div.

На фоне веб-сайта это будет выглядеть так для тега div.

<div class="box" style="background-image:url("");"> 
    <a href="#"></a> 
</div> 

Использование фонового изображения только в div, упрощает редактирование. Теперь вы можете использовать фильтр, чтобы изменить стиль изображения.

W3 Schools имеет список параметров фильтра и стилей.

https://www.w3schools.com/cssref/css3_pr_filter.asp