CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで白黒画像を作成するにはどうすればよいですか？

以下は、CSSを使用して白黒画像を作成するためのコードです-

例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
   margin: 20px;
}
img.normal{
   margin-left: 30%;
   width: 300px;
   height: 300px;
}
img.filter {
   width: 300px;
   height: 300px;
   filter: grayscale(100%);
}
</style>
</head>
<body>
<h1 style="text-align: center;">CSS Black and White Image example</h1>
<img class="normal" src="https://i.picsum.photos/id/59/500/500.jpg">
<img class="filter" src="https://i.picsum.photos/id/59/500/500.jpg">
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSSで白黒画像を作成するにはどうすればよいですか？


  1. CSSとJavaScriptを使用して見積もりの​​スライドショーを作成するにはどうすればよいですか？

    CSSとJavaScriptを使用して見積もりスライドショーを作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Gene

  2. CSSを使用して白黒画像を作成する方法

    CSSのfilterプロパティにグレースケール値を指定することで、白黒画像を作成できます。フィルタプロパティを使用して、画像にぼかしやドロップシャドウなどの特殊効果を適用できます。 構文 CSSフィルタープロパティの構文は次のとおりです- Selector {    filter: grayscale(100%);    -webkit-filter: grayscale(100%); } 例 次の例は、CSSフィルタープロパティを示しています。 <!DOCTYPE html> <html>    <