ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS 背景画像プロパティ_html/css_WEB-ITnose
CSS 背景画像プロパティ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:33:571516ブラウズ
background-image プロパティの定義と使用法:
オブジェクトの背景画像を設定または取得します。
背景画像と背景色の両方が設定されている場合、背景画像は背景色の上に重ねて表示されます。
対応するスクリプト機能はbackgroundImageです。
構文構造:
background-image:none|<url>|<linear-gradient>|<radial-gradient>|<repeating-linear-gradient>|<repeating-radial-gradient>
値:
none: 背景画像なし、デフォルト値。
9bb6a7d109b3f2bf35f7e2e9bd87f98a: 背景画像を絶対アドレスまたは相対アドレスで指定します。
88ec3091817142757563c63a206d98b3: 線形グラデーションを使用して背景画像を作成します。 (CSS3)
87993162374297c192fc0d816d00b38d: 放射状(放射状)グラデーションを使用して背景画像を作成します。 (CSS3)
13fd3b40381e496231baae5e73d0338c: 繰り返し線形グラデーションを使用して背景画像を作成します。 (CSS3)
ブラウザのサポート:
IE ブラウザはこの属性をサポートします。
Firefox はこのプロパティをサポートしています。
Google Chrome はこの属性をサポートしています。
opera ブラウザはこの属性をサポートしています。
特記事項: 1. IE8 以前のブラウザは CSS3 背景画像をサポートしていません。つまり、複数の背景や背景画像としてのグラデーションの使用をサポートしていません。
2.IE9 は、CSS3 の新しいパラメーター値: 88ec3091817142757563c63a206d98b387993162374297c192fc0d816d00b38d|13fd3b40381e496231baae5e73d0338c|4729232db7dc6d756f23a0b61ab82531 を背景画像としてサポートしません。
3.Opera11.50-11.51 は、CSS3 の新しいパラメーター値:
継承:
継承はありません。
コード例:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>CSS教程</title><style type="text/css">.test strong{ font-size:16px;}.test .url p{ padding-top:200px; background-image:url(skin/p_103x196_1.jpg); background-repeat:no-repeat;}.test .gradient p{ height:100px; background-image:-moz-linear-gradient(top, #45B5DA, #0382AD); background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD)); background-image:-o-linear-gradient(top, #45B5DA, #0382AD);}.test .multiple p{ padding-top:200px; background-image:url(skin/p_103x196_1.jpg), url(skin/p_103x196_2.jpg), url(skin/p_103x196_3.jpg); background-repeat:no-repeat; background-position:0 0, 100px 0, 200px 0;}</style></head><body><ul class="test"> <li class="url"> <strong>使用url()引入背景图像</strong> <p>使用url()可以是绝对或相对路径</p> </li> <li class="gradient"> <strong>使用渐变绘制背景图像</strong> <p>渐变种类有:linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient</p> </li> <li class="multiple"> <strong>多重背景图</strong> <p>多重背景图可以是url()或gradient的混合方式</p> </li></ul></body></html> 元のアドレスは次のとおりです: CSS 背景画像プロパティの章。
CSS の詳細については、http://www.softwhy.com/divcss/
を参照してください。