Question

我正在尝试在http://www.theverge.com/主页上的代码中对div的背景图像放置一个过滤器。老实说，我不知道如何解决它。这就是我所拥有的：

<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标签看起来像这样。

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

仅使用div上的背景图像，便于编辑。现在，您可以使用过滤器来更改图像的样式。

W3 Schools有过滤选项和样式列表。

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

CSS过滤背景图片

2 个答案: