本页二维码,扫一扫分享到朋友圈
朋友圈

css background属性详解


阅读184 评论0 赞 40返回首页    go 编程与技术  go css


css属性之background


前言

background是一个比较常用的css属性,之前一直没有完全的学习细节,今天来整理一下。


background

是一个组合属性,可以在其中设置所有的背景属性:

1

2

3

4

body

{

background:#00FF00url(bgimage.gif) no-repeat fixed top;

}

可以设置如下属性:

background-color

background-position

background-size

background-repeat

background-origin

background-clip

background-attachment

background-image

如果不设置其中的某个值,也不会出现问题。

我们先看一个例子。

可以缩写如下:

1

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center / 10px 10px;

其中斜杠前为background-position,斜杠后为background-size。

下面我们看看每个属性的用法。


background-color

顾名思义,是用来设置背景颜色的。

1

2

3

4

5

6

7

8

9

10

11

12

body

{

background-color:yellow;

}

h1

{

background-color:#00ff00;

}

p

{

background-color:rgb(255,0,255);

}

设置颜色时可以尽量使用网络安全色。


background-position

设置背景图片的起始位置。

描述



  • top left


  • top center


  • top right


  • center left


  • center center


  • center right


  • bottom left


  • bottom center


  • bottom right




如果您仅规定了一个关键词,那么第二个值将是”center”。


默认值:0% 0%。


x% y%


第一个值是水平位置,第二个值是垂直位置。


左上角是 0% 0%。右下角是 100% 100%。


如果您仅规定了一个值,另一个值将是 50%。


xpos ypos


第一个值是水平位置,第二个值是垂直位置。


左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。


如果您仅规定了一个值,另一个值将是50%。


您可以混合使用 % 和 position 值。


我们看看利用像素定义背景图片位置的demo。从左上角开始算起。


background-size

规定背景图片的尺寸:

1

2

3

4

5

6

div

{

background:url(img_flwr.gif);

background-size:80px60px;

background-repeat:no-repeat;

}

语法:

1

background-size: length|percentage|cover|contain;


描述

测试

length


设置背景图像的高度和宽度。


第一个值设置宽度,第二个值设置高度。


如果只设置一个值,则第二个值会被设置为 “auto”。


测试

percentage


以父元素的百分比来设置背景图像的宽度和高度。


第一个值设置宽度,第二个值设置高度。


如果只设置一个值,则第二个值会被设置为 “auto”。


测试

cover


把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。


背景图像的某些部分也许无法显示在背景定位区域中。


测试

contain

把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

测试

可以看看对应demo


background-repeat

设置如何重复背景图像。

1

2

3

4

5

body

{

background-image:url(stars.gif);

background-repeat: repeat-y;

}



描述

repeat

默认。背景图像将在垂直方向和水平方向重复。

repeat-x

背景图像将在水平方向重复。

repeat-y

背景图像将在垂直方向重复。

no-repeat

背景图像将仅显示一次。

inherit

规定应该从父元素继承 background-repeat 属性的设置。

对应demo

通常no-repeat也就是背景图片仅显示一次,比较常用。


background-origin

该属性规定background-position属性相对于什么位置来定位。这是一个css3属性。


描述

测试

padding-box

默认值,背景图像相对于内边距框来定位。

测试

border-box

背景图像相对于边框盒来定位。

测试

content-box

背景图像相对于内容框来定位。

测试

有些情况下,我们需要背景图在右下角出现,但是又不想是紧挨边缘。如果使用background-position:bottom right;的话,会紧挨着边缘。

所以可以配合该属性使用:

1

2

3

padding:10px;

background-position:bottom right;

background-origin:content-box;


background-clip

该属性规定背景的绘制区域,这是一个css3属性。


描述

测试

border-box

默认值,背景被裁剪到边框盒。

测试

padding-box

背景被裁剪到内边距框。

测试

content-box

背景被裁剪到内容框。

测试

相关demo


background-attachment

该属性设置背景图像是否固定或者随着页面的其余部分滚动。


描述

scroll

默认值。背景图像会随着页面其余部分的滚动而移动。

fixed

当页面的其余部分滚动时,背景图像不会移动。

inherit

规定应该从父元素继承 background-attachment 属性的设置。


background-image

该属性为元素设置背景图像。

1

body{background-image:url(/i/eg_bg_04.gif);}


  上一篇:go 用CSS制作标签云
  下一篇:go css清除浮动解决方案


评论


用QQ登录管理/创建网站 用微博登录管理/创建网站   发布于:11-19