Graustufen ein PNG Bild

-1

Also ich versuche, einen Filter zu setzen: Graustufen auf meinem PNG-Bild, aber es funktioniert nicht aus irgendeinem Grund.Graustufen ein PNG Bild

Ich schneide einen Teil von meinem Bild (ein Berg, mit Photoshop, transparenten Hintergrund). und lege es über mein Hintergrundbild. Wenn ich versuche, meinen Berg umzudrehen, funktioniert es, aber wenn ich versuche, es zu graustufen, funktioniert es nicht.

hier ist mein HTML-Code:

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

hier mein CSS-Code ist:

#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%); 
} 
}

Quelle

2016-11-29 Sid

Haben Sie versucht, hinzugefügt etwas vor stellen Sie Ihre Frage zu suchen? http://stackoverflow.com/questions/16340159/greyscale-background-css-images – Vel

tray Fügen Sie -webkit-filter: grayscale(100%);filter: grayscale(100%); in der #container hinzu, um das ganze Graustufenbild zu machen. sogar es funktioniert in Keyframe. Hier habe ich die Demo

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

Quelle

2016-11-29 18:54:54 jafarbtech

Es funktioniert nicht;), lassen Sie uns sagen, wenn ich einen Schwebeflug auf mein Gebirgsbild setze, färbt es das transparente Material zu irgendeiner Farbe, die ich will aber nicht das Bild selbst. Ich kann drehen, mein Bild mit Keyframes skalieren, aber wenn ich es graustufen möchte, funktioniert es nicht. – Sid

Ich habe die Demo mit einigen Keyframes mit Graustufen hinzugefügt. als Antwort annehmen, wenn es hilft, damit jemand wie du die Antwort leicht finden kann. – jafarbtech

Ich versuche, die Graustufen auf (bergk) nicht auf (huufd);) so ist Ihr Code nicht richtig;) – Sid

ich das jetzt nicht können versuchen, aber Sie können diesen Code

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

Quelle

2016-11-29 18:52:15 strava1

Graustufen ein PNG Bild

Antwort

Verwandte Themen