灰度PNG圖像

-1

，所以我試圖把一個過濾器：灰度我的PNG圖像，但它是不工作的一些原因。灰度PNG圖像

我切斷部從我的圖像（山，用photoshop，透明背景）。並把它放在我的背景圖片上。當我嘗試轉換旋轉我的山它正在工作，但是當我嘗試灰度它，它不工作。

這裏是我的HTML代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<link rel="stylesheet" href="css/style.css"> 
<title>Document</title> 
</head> 
<body> 

<div id="container"> 
<div id="vrouw"></div> 
<div id="hoofd"></div> 
<div id="berg"></div> 
</div> 


</body> 
</html>

這裏是我的CSS代碼：

#container { 
position: relative; 
margin: 0 auto; 
width: 801px; 
height: 1233px; 
} 

#vrouw { 
background-image: url(../img/vrouw2.jpg); 
width: 801px; 
height: 1233px; 
margin: auto; 
z-index: 1; 
} 

#hoofd { 
background-image: url(../img/hoofd.png); 
width: 164px; 
height: 213px; 
position: absolute; 
top: 200px; 
left: 250px; 
animation-name: huufd; 
animation-duration: 6s; 
animation-iteration-count:infinite; 
animation-timing-function: linear; 
z-index: 3; 
} 


@keyframes huufd { 
0% { 
    transform: rotate(0deg); 
} 
10% { 
    transform: rotate(-10deg); 
} 
20% { 
    transform: rotate(-5deg); 
} 
30% { 
    transform: rotate(10deg); 
} 
40% { 
    transform: rotate(5deg); 
} 
50% { 
    transform: rotate(0deg); 
} 
60% { 
    transform: translate(5px); 
} 
70% { 
    transform: translate(-5px); 
} 
80% { 
    transform: translateY(3px); 
} 
90% { 
    transform: translateY(-3px); 
} 
100% { 
    transform: translateY(0px); 
    transform: translate(0px); 
} 
} 

#berg { 
background-image: url(../img/mountain.png); 
width: 801px; 
height: 518px; 
top: 0px; 
left: 0px; 
position: absolute; 
animation-name: bergk; 
animation-iteration-count: infinite; 
animation-duration: 3s; 
animation-timing-function: linear; 
z-index: 2; 
} 


@keyframes bergk { 
0% { 
    filter: grayscale(10%); 
} 
10% { 
    filter: grayscale(30%); 
} 
20% { 
    filter: grayscale(20%); 
} 
30% { 
    filter: grayscale(40%); 
} 
40% { 
    filter: grayscale(60%); 
} 
50% { 
    filter: grayscale(90%); 
} 
60% { 
    filter: brightness(10%); 
} 
70% { 
    filter: brightness(30%); 
} 
80% { 
    filter: brightness(20%); 
} 
90% { 
    filter: brightness(40%); 
} 
100% { 
    filter: brightness(90%); 
} 
}

來源

2016-11-29 Sid

您是否嘗試搜索了一下，再發表你的問題？ http://stackoverflow.com/questions/16340159/greyscale-background-css-images – Vel

在#container中添加-webkit-filter: grayscale(100%);filter: grayscale(100%);以使整體灰度。即使它在關鍵幀中工作。在這裏，我已經添加了演示

#container { 
 
position: relative; 
 
margin: 0 auto; 
 
width: 801px; 
 
height: 1233px; 
 
} 
 

 
#vrouw { 
 
background-image: url('https://www.google.co.in/logos/doodles/2016/jagadish-chandra-boses-158th-birthday-5756743989592064.2-hp.png'); 
 
width: 801px; 
 
height: 1233px; 
 
margin: auto; 
 
z-index: 1; 
 
} 
 

 
#hoofd { 
 
background-image: url('https://www.google.co.in/logos/doodles/2016/jagadish-chandra-boses-158th-birthday-5756743989592064.2-hp.png'); 
 
width: 164px; 
 
height: 213px; 
 
position: absolute; 
 
top: 200px; 
 
left: 250px; 
 
animation-name: huufd; 
 
animation-duration: 6s; 
 
animation-iteration-count:infinite; 
 
animation-timing-function: linear; 
 
z-index: 3; 
 
} 
 

 

 
@keyframes huufd { 
 
0% { 
 
    transform: rotate(0deg); 
 
} 
 
10% { 
 
    transform: rotate(-10deg); 
 
} 
 
20% { 
 
    transform: rotate(-5deg); 
 
} 
 
30% { 
 
    transform: rotate(10deg); 
 
} 
 
40% { 
 
    transform: rotate(5deg); 
 
} 
 
50% { 
 
    transform: rotate(0deg); 
 
} 
 
60% { 
 
    transform: translate(5px); 
 
} 
 
70% { 
 
    transform: translate(-5px); 
 
} 
 
80% { 
 
    transform: translateY(3px); 
 
} 
 
90% { 
 
    transform: translateY(-3px); 
 
} 
 
100% { 
 
    transform: translateY(0px); 
 
    transform: translate(0px); 
 
} 
 
} 
 

 
#berg { 
 
background-image: url('https://www.google.co.in/logos/doodles/2016/jagadish-chandra-boses-158th-birthday-5756743989592064.2-hp.png'); 
 
width: 801px; 
 
height: 518px; 
 
top: 0px; 
 
left: 0px; 
 
position: absolute; 
 
animation-name: bergk; 
 
animation-iteration-count: infinite; 
 
animation-duration: 3s; 
 
animation-timing-function: linear; 
 
z-index: 2; 
 
} 
 

 

 
@keyframes bergk { 
 
0% { 
 
    filter: grayscale(10%); 
 
} 
 
10% { 
 
    filter: grayscale(30%); 
 
} 
 
20% { 
 
    filter: grayscale(20%); 
 
} 
 
30% { 
 
    filter: grayscale(40%); 
 
-webkit-filter: grayscale(100%); 
 
-moz-filter: grayscale(100%); 
 
-moz-filter: grayscale(100%); 
 
filter: grayscale(100%); 
 
} 
 
40% { 
 
    filter: grayscale(60%); 
 
-webkit-filter: grayscale(100%); 
 
-moz-filter: grayscale(100%); 
 
-moz-filter: grayscale(100%); 
 
filter: grayscale(100%); 
 
} 
 
50% { 
 
    filter: grayscale(90%); 
 
-webkit-filter: grayscale(100%); 
 
-moz-filter: grayscale(100%); 
 
-moz-filter: grayscale(100%); 
 
filter: grayscale(100%); 
 
} 
 
60% { 
 
    filter: brightness(10%); 
 
-webkit-filter: grayscale(100%); 
 
-moz-filter: grayscale(100%); 
 
-moz-filter: grayscale(100%); 
 
filter: grayscale(100%); 
 
} 
 
70% { 
 
    filter: brightness(30%); 
 
-webkit-filter: grayscale(100%); 
 
-moz-filter: grayscale(100%); 
 
-moz-filter: grayscale(100%); 
 
filter: grayscale(100%); 
 
} 
 
80% { 
 
    filter: brightness(20%); 
 
} 
 
90% { 
 
    filter: brightness(40%); 
 
} 
 
100% { 
 
    filter: brightness(90%); 
 
} 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<link rel="stylesheet" href="css/style.css"> 
 
<title>Document</title> 
 
</head> 
 
<body> 
 

 
<div id="container"> 
 
<div id="vrouw"></div> 
 
<div id="hoofd"></div> 
 
<div id="berg"></div> 
 
</div> 
 

 

 
</body> 
 
</html>

來源

2016-11-29 18:54:54 jafarbtech

它不工作;），讓我們說，當我把我的山上的圖像懸停，它的顏色透明的東西，我想要的任何顏色但不圖像本身。我可以旋轉，縮放與關鍵幀的圖像，但是當我想要灰度時，它不起作用。 – Sid

我已經添加了使用灰度幾個關鍵幀的演示。如果有幫助，接受答案，以便像你這樣的人可以輕鬆找到答案。 – jafarbtech

我試圖把灰度（bergk）不（huufd）;）所以你的代碼是不正確的;） – Sid

我現在不能試試這個，但你可以托盤這段代碼

img { 
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ 
filter: grayscale(100%); 
}

來源

2016-11-29 18:52:15 strava1

回答

相關問題