CSS过滤器背景图片

我试图在下面的代码中在div的背景图像上放置一个过滤器，在http://www.theverge.com/的主页上完成。老实说，我不知道如何绕过它。这是我有：CSS过滤器背景图片

<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>

来源

2015-08-15 lizzza

只是供参考：''div''''无效。 – putvande

在html5 @putvande它有效的锚'div's - http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element（你自称是一个开发人员在html5！） – Pete

在框中添加一个过滤器元件与过滤颜色

<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/

来源

2015-08-15 09:31:10

股利是无效的，因为它是一个开始标记。除非你想在导航栏上的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

来源

2017-06-06 04:41:33

CSS过滤器背景图片

回答

相关问题