0
私は現在、CSSフィルタを使用していますが、4つのフィルタのうち1つだけが動作している理由を理解できません。CSSフィルタが機能しない（1つを除いて）
私は現在divに4つの画像があり、上部に2つ、下部に2つの画像があります。各画像はボーダーとパディングで右に浮かびます。私はこれを#idとして作成しました。次に、4つのCSSフィルタをクラスとして画像に適用しますが、グレースケールのみが機能しています。
すべてのIDがユニークで（イメージがフローティングになっているように動作している）、グレースケールのクラスの1つが完全に機能しているため、グレースケールのみが動作している理由を理解できません。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
vertical-align: top;
display: inline-block;
width: 500px;
border: 2px solid #000;
padding: 10px;
margin: 0 auto 0 auto;
}
#img1 {
float: right;
border: 2px solid black;
margin: 0 20px 20px 20px;
}
#img2 {
float: right;
border: 2px solid black;
margin: 0 20px 20px 20px;
}
#img3 {
float: right;
border: 2px solid black;
margin: 0 20px 20px 20px;
}
#img4 {
float: right;
border: 2px solid black;
margin: 0 20px 20px 20px;
}
.sepia {
-webkit-filter: sepia(5000);
}
/* this class works*/
.grayscale {
-webkit-filter: grayscale(1);
}
.blur {
-webkit-filter: blur(1000px);
}
.contrast {
-webkit-filter: contrast(1);
}
</style>
</head>
<body>
<div>
<h2>Sepia</h2>
<img id="img1" class="sepia" src="images/owl.jpg" alt="This is an owl" width="250" height="250">
</div>
<div>
<!-- this works perfectly-->
<h2>Grayscale</h2>
<img id="img2" class="grayscale" src="images/owl.jpg" alt="This is an owl" width="250" height="250">
</div>
<div>
<h2>Blur</h2>
<img id="img3" class="blur" src="images/owl.jpg" alt="This is an owl" width="250" height="250">
</div>
<div>
<h2>Contrast</h2>
<img id="img4" class="contrast" src="images/owl.jpg" alt="This is an owl" width="250" height="250">
</div>
</body>
</html>
は、ベンダープレフィックスを削除し、 '（私はすべてのフィルタ値はぼかしがピクセルを使用しています
0〜1の間であったと思ったように私は間違った値を使用していました-webkit-'）を' filter'から削除します。 –