CSS を使用してテクスチャ付きグラデーション背景画像を記述するためのサンプル コード

プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあるため、サイズが非常に大きく読み込みに時間がかかるため、CSSを使用して実装します。

今回主に利用したウェブサイトは、Hero Patterns - 無料オンラインテクスチャライブラリです

このウェブサイトには多くの既製の背景があり、背景色、パターン色、透明度をカスタマイズすることもできます。

ウェブサイトの背景色は単色です。グラデーションの背景が必要な場合は、テクスチャの背景色を透明色に設定し、親要素の背景画像をグラデーション効果に設定できます。

html,本文{
  背景: #000;
  最小幅: 1024px; 
  背景画像: 線形グラデーション(右へ、#000 -6%、#703ccc、#000 110%);
}

.拡散{
    最小幅: 1024px;
    高さ: 自動;
    位置: 相対的;
    左: 0;
    上: 0;
    幅: 100%;
    高さ: 100%;
    背景色: 透明;
    背景画像: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.61' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    }

はい、これで終わりです〜

CSS を使用してテクスチャ グラデーション背景画像のサンプル コードを記述する方法についての説明はこれで終わりです。CSS テクスチャ グラデーション背景画像に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。