CSS背景を使用してグラフィックを描画する方法（コードは添付されています）

この記事の内容は、CSS 背景を使用してグラフィックを描画する方法 (コード付き) です。必要な方は参考にしていただければ幸いです。

日々の仕事の中で、特定の要素に特別な背景画像を追加することが必然的に求められると思います。その際、通常は PS を手に取り、それを実行します。この方法が面倒であることは言うまでもなく、UI が自動的にカットしてくれるのであれば十分ですが、そうでない場合は自分で行うこともできます。特大の画像全体を切り取る必要がある場合もあります。 「優秀な」フロントエンドとして、衣食足りるというコンセプトに沿って、特別な絵を描くための背景を使用する方法を紹介します。

まずは内容を見てみましょう。通常は次のように表示されます

この状況に遭遇した場合の通常の解決策は、次の画像を切り取ることです

そしてそれを渡します CSS を使用して

<div></div>

<style>
  .box{
    width: 500px;
    height: 500px;
    background: url(&#39;imgurl&#39;);
    background-size: 20%;
  }
</style>

もちろん、今は画像を切り取らずに、CSS を使用して直接実行します

.box{
    width: 500px;
    height: 500px;
    background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
                linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 0,
                linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px,
                linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 100px 50px;
    background-size: 100px 100px;
    background-color: #fff;
}

We画像を切り取るのとまったく同じ効果が得られることがわかります。

次に見てみましょう。なぜ上記の CSS はこのように書かれているのでしょうか。
まず、背景を理解しましょう。 CSS3 グラデーションは、background: url() として理解できる背景画像と見なすことができ、背景画像は複数の画像にすることができます。それに応じて、複数の線形グラデーションを記述し、色を制御することでそれらを独立した画像ブロックに結合できます。 。背景サイズの更新はカンマで区切ることができ、対応する線形グラデーションがループ内に設定されます。
ここで、線形グラデーションは後ろから前に描画されることに注意してください。これは、前の色が後ろの色を覆うことを意味します。

上記のグリッドの背景を分析すると、4x4 グリッドとそれを覆う 2 つの 1x1 グレー グリッドとして見えると思います。各灰色のグリッドは

の基本パターンから組み立てることができるため、次の

background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
            linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px;

が得られます。

#ここには小さな三角形の間に隙間があるため、

グラフィックを使用してそれらを再度結合します。 。

background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
            linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px,
            linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 0,
            linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 100px 50px;

ついに、上記と同じグリッドの背景を取得できます。
その他の例

必要な背景には繰り返しが必要ない場合があり、グラフィックにはルールがありません
例:

##現時点では、グラフィックの各隅を個別に設定する必要があります。

.box{
    width: 500px;
    height: 500px;
    background: linear-gradient(black, black) left top,
                linear-gradient(black, black) left top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) left bottom,
                linear-gradient(black, black) left bottom;
    background-repeat: no-repeat;
    background-size: 4px 20px, 20px 4px;

原理は、実際には線形グラデーションで各グラフィックを描画し、位置とサイズを設定することで、最終的に目的の画像を得ることができます。

将来的には、特別な背景画像が発生した場合、CSS を通じて実装できるようになります。

以上がCSS背景を使用してグラフィックを描画する方法（コードは添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。