Heim > Web-Frontend > HTML-Tutorial > CSS探案之 background属性剖析_html/css_WEB-ITnose

CSS探案之 background属性剖析_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:22:09
Original
1061 Leute haben es durchsucht

首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少

麻烦人家把,反正我是这样 ,几乎也少会用到背景图,原因很简单:就是有点害怕用背景图,感觉很繁琐,什么

尺寸啊,位置啊,是否重复啊等等,听着头都大,所以就一直没有去好好地学习一下它,每次碰见就劝自己“下次再

看吧”,然而“明日复明日,明日何其多”,干脆就解决了它

 

background是css背景属性的简写,例如这样:background: #00FF00 url(bgimage.gif) no-repeat fixed top;

但是它又可以拆分成下面的几个子属性:

background-color

background-position

background-size

background-repeat

background-origin

background-clip

background-attachment

background-image

 

这些子属性分别代表什么意思呢?下面开始一个个地为大家介绍

 

********************分割线*********************

 

属性一:background-color

如其名,这个属性是设置背景颜色的,有5种可能的值:

1.background-color:red;(已颜色英文名称命名的颜色值)

2.background-color:#ff0000;(十六进制的颜色值)

3.background-color:rgb(255,0,0);(rgb类型的颜色值)

4.background-color:transparent;(默认,背景色为透明)

5.background-color:inherit;(值从父元素继承)

 

当我们单独设置背景颜色时,background-color:red;和background:red;结果是一样的

 

属性二:background-image

该属性是定义背景图片的url, 默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复

提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

使用方法:

background-image:url('demo.jpg');    //url中传入背景图的链接

 

属性三:background-position

该 属性设置背景图像的起始位置。

这个属性设置背景原图像(由  background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

 

代码举例:

<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>
Nach dem Login kopieren

运行结果:

属性四:background-size

background-size 属性规定背景图像的尺寸。

代码示例:

<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>
Nach dem Login kopieren

运行结果:

属性五: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>
Nach dem Login kopieren

运行结果:

属性六: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>
Nach dem Login kopieren

运行结果:

属性七: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>
Nach dem Login kopieren

运行结果:

属性八: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>
Nach dem Login kopieren

 

运行结果:

 

 

注意红框里面的滚动条,实际运行时,页面滚动,背景不跟随滚动,但是现在的截图看不出效果,所以对不起各位了

 

 

结语:可能大家觉得我这篇文章只是在复制粘贴,没什么意义,确实如此,当我写到一半时,自己就在想放弃,但是

现在想起来,幸亏当时没有把那一半删掉,因为,在写的整个过程中,我先要看一遍w3school的帮助文档,结果还真

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

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage