CSS Detective_html/css_WEB-ITnoseのbackground属性の解析-htmlチュートリアル-php.cn

CSS Detective_html/css_WEB-ITnoseのbackground属性の解析

WBOY

リリース： 2016-06-24 11:22:09

オリジナル

1061 人が閲覧しました

まず、背景と背景色という 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 です。デフォルトでは、背景画像は画像の左上隅にあります。要素を水平方向に繰り返し、垂直方向に繰り返します

ヒント: 背景画像が利用できない場合でも、ページに良好な視覚効果が得られるように、利用可能な背景色を設定してください。

使用法:

background-image:url('demo.jpg'); // 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的帮助文档，结果还真

是收获不少。世上没有完全徒劳的事情，我坚信这一点，所以谨以此篇文章作为以后工作的参考