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

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

CSSのfilterプロパティにグレースケール値を指定することで、白黒画像を作成できます。フィルタプロパティを使用して、画像にぼかしやドロップシャドウなどの特殊効果を適用できます。

構文

CSSフィルタープロパティの構文は次のとおりです-

Selector {
   filter: grayscale(100%);
   -webkit-filter: grayscale(100%);
}

例

次の例は、CSSフィルタープロパティを示しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            margin: 2%;
            border-radius: 25%;
         }
         img:nth-of-type(even) {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
         }
      </style>
   </head>
   <body>
      <img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
      <img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
   </body>
</html>

これにより、次の出力が得られます

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

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            margin: 2%;
         }
         img:nth-of-type(odd) {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
         }
      </style>
   </head>
   <body>
      <img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
      <img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
   </body>
</html>

これにより、次の出力が得られます

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


  1. CSSでスティッキーイメージを作成するにはどうすればよいですか？

    以下は、CSSでスティッキーな画像を作成するためのコードです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img {    position: sticky;    top: 0;    width: 300px;    height: 300

  2. CSSクリップパスを使用して三角形を作成する方法

    CSSのclip-pathプロパティを使用して三角形を作成できます。 構文 CSSclip-pathプロパティの構文は次のとおりです- Selector {    clip-path: /*value*/ } 例 次の例は、CSSのclip-pathプロパティを示しています。 <!DOCTYPE html> <html>    <head>       <style>          div {