概要
テキストや図などの画像データを背景画像として、HTMLでマークアップされた要素を隠す方法を紹介。用途
- 文章構造を崩さずに画像テキスト（img要素は使用しない）を表示する。
- レスポンシブ時に画像が切り替わる。
検証ブラウザ
- Microsoft Edge(最新)
- IE11
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
実装方法
HTML
<div class="c-block">Dummy</div>
SCSS
.c-block {
width: 300px;
height: 0;
padding-top: 300px;
background: url(PC画像パス) 0 0 no-repeat;
background-size: 100%;
overflow: hidden;
@media screen and (max-width: 750px) {
width: 200px;
padding-top: 200px;
background-image: url(スマホ画像パス);
}
}
CSS
.c-block {
width: 300px;
height: 0;
padding-top: 300px;
background: url(https://konocode.jp/img/common/dummy_600_600.png) 0 0 no-repeat;
background-size: 100%;
overflow: hidden;
}
@media screen and (max-width: 750px) {
.c-block {
width: 200px;
padding-top: 200px;
background-image: url(https://konocode.jp/img/common/dummy_200_200.png);
}
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
