灰度PNG图像
问题描述：
，所以我试图把一个过滤器：灰度我的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%);
}
}
答
在#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>+0
它不工作;），让我们说，当我把我的山上的图像悬停，它的颜色透明的东西，我想要的任何颜色但不图像本身。我可以旋转，缩放与关键帧的图像，但是当我想要灰度时，它不起作用。 – Sid
+0
我已经添加了使用灰度几个关键帧的演示。如果有帮助，接受答案，以便像你这样的人可以轻松找到答案。 – jafarbtech
+0
我试图把灰度（bergk）不（huufd）;）所以你的代码是不正确的;） – Sid
答
我现在不能试试这个，但你可以托盘这段代码
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
您是否尝试搜索了一下，再发表你的问题？ http://stackoverflow.com/questions/16340159/greyscale-background-css-images – Vel