HTML

CSS で Adobe Photoshop のあの透明を表現する方法

CSS で Adobe Photoshop のあの透明を表現する方法

CSS で Adobe Photoshop のあの透明を表現する方法を紹介します。
例えば、Adobe Photoshop が好きすぎる人におすすめな方法です。

  1. CSS で Adobe Photoshop の透明を表現する方法

CSS で Adobe Photoshop の透明を表現する方法

CSS で市松模様を表現するには linear-gradient を使用します。
例えば、特定の要素に透明の市松模様を表示するには、次のコードを特定の要素に追加します。

.transparent {
background: rgb(204, 204, 204);
background-image:
linear-gradient(45deg, rgb(255, 255, 255) 25%, transparent 0),
linear-gradient(45deg, transparent 75%, rgb(255, 255, 255) 0),
linear-gradient(45deg, rgb(255, 255, 255) 25%, transparent 0),
linear-gradient(45deg, transparent 75%, rgb(255, 255, 255) 0);
background-size: 16px 16px;
background-position: 0 0, 8px 8px, 8px 8px, 16px 16px;
}

実際の表示はこんな感じ。

まとめ

CSS で Adobe Photoshop の透明を表現する方法を紹介しました。

この記事をシェアする