[B! 背景] bamboo_nのブックマーク

[CSS3] rgba() 値が使えない IE8 でも背景のみを透過できるクロスブラウザな背景の透過方法

要素の背景のみを透過したい場合は background-color に rgba() で背景色と透明度を指定しますが、いつものことながら IE8 は rgba() の色指定に対応していません…。そこで、IE8 にも対応したクロスブラウザで背景色の透明度を指定する方法をご紹介します。 IE8でも背景のみを透過するサンプルとそのコード背景に透明度0.4の黒を指定したdivと、全く透明でない黒背景のdivを比較の為におきました。上の div は IE でも背景のみ透過されて表示されます。（CodePen のインラインフレームだと IE8 では正常に表示されないようです…） See the Pen ie8でも背景を透明にする by Saomocari (@Saomocari) on CodePen. このサンプルでは、背景を透明にしたい要素に対し以下のように指定しています。 div{ filte

bamboo_n 2016/04/08

リンク

[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。 ※1との互換性はありません。 Vegas 2のデモ Vegas 2の使い方 Vegas 2のデモデモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。 Doc -Animations 表示方法にも多彩なエフェクトが用意されています。 Vegas 2の使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjQu

bamboo_n 2016/03/03

リンク

[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック

背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。デモを幅480pxで表示コンセプト「background-size」をビューポート全体をカバーするために使う「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。「Media Queries」をスマフォ対策として使うスマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ

bamboo_n 2015/12/24

リンク

背景画像をフルスクリーン＆レスポンシブ対応にする方法 | co-jin

背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります。見る人を思わず引き込む背景フルスクリーンですが、レスポンシブ対応にもなっていれば、とってもいいですよね。今回はそんな背景画像をフルスクリーン表示して、なおかつレスポンシブ対応にする方法をご紹介します。コードもとってもシンプルなので、試してみてください。 htmlを準備するまずはHTMLを準備します。 <!DOCTYPE html> <html> <head> <meta https-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>背景画像はフルスクリーンにして、レスポンシブにも対応しています</title><br> <link rel="stylesheet" href="sample.css" /