CSS 背景画像プロパティ_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS 背景画像プロパティ_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:33 AM

background-image プロパティの定義と使用法:
オブジェクトの背景画像を設定または取得します。
背景画像と背景色の両方が設定されている場合、背景画像は背景色の上に重ねて表示されます。
対応するスクリプト機能はbackgroundImageです。
構文構造:

background-image:none|<url>|<linear-gradient>|<radial-gradient>|<repeating-linear-gradient>|<repeating-radial-gradient>

ログイン後にコピー

値:
none: 背景画像なし、デフォルト値。
: 背景画像を絶対アドレスまたは相対アドレスで指定します。
: 線形グラデーションを使用して背景画像を作成します。 (CSS3)
: 放射状(放射状)グラデーションを使用して背景画像を作成します。 (CSS3)
: 繰り返し線形グラデーションを使用して背景画像を作成します。 (CSS3)
: 繰り返し放射状 (放射状) グラデーションを使用して背景画像を作成します。 (CSS3)
ブラウザのサポート:
IE ブラウザはこの属性をサポートします。
Firefox はこのプロパティをサポートしています。
Google Chrome はこの属性をサポートしています。
opera ブラウザはこの属性をサポートしています。
特記事項: 1. IE8 以前のブラウザは CSS3 背景画像をサポートしていません。つまり、複数の背景や背景画像としてのグラデーションの使用をサポートしていません。
2.IE9 は、CSS3 の新しいパラメーター値: || を背景画像としてサポートしません。
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/

を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。