jQueryでIE8でCSSの「background-size:cover」プロパティを擬似的に再現する実験｜BLACKFLAG
CSSでエリアの幅や高さに合わせて背景画像をフィットさせることができる「background-size:cover」。 とても便利なプロパティなのですがIE8以下のIEブラウザには対応していません。 IE8以下で「background-size:cover」を実装させるjQueryプラグインもいくつかありますが 実際に使ってみた際に理想通りに動作しないこともあったので jQueryを使ってIE8以下で「background-size:cover」を実現させる方法を 実験的に試してみたサンプルをご紹介してみます。 まずは動作サンプルから。 ※IE8以下のブラウザと見比べてご確認ください。 「jQueryでIE8でCSSの「background-size:cover」を擬似的に再現する方法」サンプルを別枠で表示 サンプル画面内に設置した画像表示エリアには背景画像を敷き、 「background
[CSS]box-sizingを使ったIE8+対応の画像やテキストを画像に置換するテクニック
img要素やhr要素、テキストなどをHTMLは変更せずに、スタイルシートで画像に置換するテクニックを紹介します。 img要素で配置した画像を別の画像に、hr要素を画像の区切りに、見出しなどのテキストを見出し画像に変更できます。 Replace the Image in an <img> with CSS 下記は、ポイントを意訳したものです。 元のHTMLファイル 事の発端は、HTMLやJavaScriptを編集できない状態で、画像を変更する必要にせまられたものです。どのように画像を変更したか紹介します。 HTML HTMLはこんな感じです。 .headerに子要素で画像が配置してあります。background-imageは無しです。 <head> <title>Really Cool Page</title> </head> <body> <div class="header"> <img
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
