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過濾器背景圖片

回答

相關問題