趣味と仕事の境界線・・・・・・

困ったこと・調べたこと・勉強したこと・興味の湧いたこと。今蒔く種が未来となるように。

CSSでの背景画像指定で複数画像を設定できないと思い込んでて困った話。

f:id:toyoyo:20190520193220p:plain

感覚的にそんな書き方できたっけ?と思ったけど普通にできるとのことでした。

調べてみるとMDNにて下記の説明を発見。

CSS での複数の背景の利用方法 - CSS: カスケーディングスタイルシート | MDN

CSS3 より、要素に複数の背景を適用できるようになりました。複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。

CSS3から可能とのことで、古い知識のアップデートしないといけないと再認識。

developer.mozilla.org

CSS:1つの要素に背景画像(background-image)を複数設置 | PressStocker

画像を複数指定する場合は、「backgroud」プロパティを使用して一括指定で記述をすると表示が正常に行われませんので、それぞれ個別のプロパティを使用して記述してください。

ショートハンドでの記述はできないという点に注意。

めでたしめでたし。