ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS Detective_html/css_WEB-ITnoseのbackground属性の解析
CSS Detective_html/css_WEB-ITnoseのbackground属性の解析
- WBOYオリジナル
- 2016-06-24 11:22:091060ブラウズ
まず、背景と背景色という 2 つの CSS プロパティを見てみましょう。この2人です、誰もが日常生活の中でそれらを持っているべきだと思います
すみません、とにかく、私はこんな感じで、背景画像をほとんど使いません。理由は非常に単純です。私は背景画像を使用するのが少し怖いのです。とても面倒に感じます
大きさ、位置、繰り返しかどうかなど、わかりにくくて、きちんと勉強したことがないので、出会うたびに「今度見てみよう
」と自分に言い聞かせています。 、しかし、「明日は明日が来る、明日はたくさんある」、私たちはそれを単純に解決しました
背景は CSS 背景属性の略称です。例: 背景: #00FF00 url(bgimage.gif) no-repeat fixedトップ;
ただし、次のサブプロパティに分割できます:
background-color
background-position
background-size
background-repeat 戻る
地上起源background-clip
background-attachment
background-image
これらのサブ属性は何を意味しますか?一つずつ紹介していきましょう
**********************区切り線************** *** *****
属性 1: background-color
その名前が示すように、この属性は 5 つの可能な値で背景色を設定します。
1.background-color:red; color 英語名で名付けられたカラー値)2.background-color:#ff0000; (16進数のカラー値)
3.background-color:rgb(255,0,0);(RGB型のカラー値)
4 .background-color:transparent; (デフォルト、背景色は透明)
5.background-color:inherit; (親要素から継承された値)
背景色を個別に設定する場合、background-color:red;と、background:red; 結果は同じです
属性 2:background-image
この属性は、背景画像を定義する URL です。デフォルトでは、背景画像は画像の左上隅にあります。要素を水平方向に繰り返し、垂直方向に繰り返します
ヒント: 背景画像が利用できない場合でも、ページに良好な視覚効果が得られるように、利用可能な背景色を設定してください。
使用法:
属性 3:background-position
この属性は背景を設定します画像の開始位置。 この属性は、元の背景画像 (background-image で定義) の位置を設定します。背景画像を繰り返す場合は、この点から開始されます。
ヒント: このプロパティが Firefox と Opera で適切に動作するようにするには、background-attachment プロパティを「fixed」に設定する必要があります。
コード例:
<style type="text/css">body{ border:1px solid #000; background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center;}</style></head><body><p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。</p></body>
実行結果:
属性 4: 背景サイズ
背景サイズ属性の規制背景画像のサイズ。
コード例:
<style> body{background:url(/i/bg_flower.gif);background-size:63px 100px;-moz-background-size:63px 100px; /* 老版本的 Firefox */background-repeat:no-repeat;padding-top:80px;}</style></head><body><p>上面是缩小的背景图片。</p><p>原始图片：<img src="/i/bg_flower.gif" alt="Flowers"></p></body>
実行結果:
属性五：background-repeat
background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。
详细说明
background-repeat 属性定义了图像的平铺模式。
从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。
提示：背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。
代码示例：
<style type="text/css">body{border:1px solid #000;background-image:url(/i/eg_bg_03.gif);background-repeat: repeat-y}</style></head><body>
运行结果：
属性六：background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
代码示例：
<style> div{border:1px solid black;padding:35px;background-image:url('/i/bg_flower.gif');background-repeat:no-repeat;background-position:left;}#div1{background-origin:border-box;}#div2{background-origin:content-box;}</style></head><body><p>background-origin:border-box:</p><div id="div1">这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div><p>background-origin:content-box:</p><div id="div2">这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div></body>
运行结果：
属性七：background-clip
background-clip属性规定背景的绘制区域
代码示例：
<style>div{width:300px;height:300px;padding:50px;background-color:yellow;background-clip:content-box;border:2px solid #92b901;}</style></head><body><div>这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div></body>
运行结果：
属性八：background-attachment
background-attachment规定如何设置固定的背景图像
代码示例：
<style type="text/css">body {background-image:url(/i/eg_bg_02.gif);background-repeat:no-repeat;background-attachment:fixed}</style></head><body><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p></body>
运行结果：
注意红框里面的滚动条，实际运行时，页面滚动，背景不跟随滚动，但是现在的截图看不出效果，所以对不起各位了
结语：可能大家觉得我这篇文章只是在复制粘贴，没什么意义，确实如此，当我写到一半时，自己就在想放弃，但是
现在想起来，幸亏当时没有把那一半删掉，因为，在写的整个过程中，我先要看一遍w3school的帮助文档，结果还真
是收获不少。 世上没有完全徒劳的事情，我坚信这一点，所以谨以此篇文章作为以后工作的参考