css background属性

背景图占据padding的内容,可以使用background-clip在调整

background-color 使用的背景颜色。

background-image 使用的背景图像。

background-repeat 如何重复背景图像。

background-attachment 背景图像是否固定或者随着页面的其余部分滚动。

background-position 背景图像的位置。

css3新增

background-size 背景图片的尺寸。可以指定背景图的大小,例如20%  60px;

background-origin 背景图片的定位区域。

background-clip 背景的绘制区域。

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

background: aquamarine

url(img.png)

no-repeat

scroll

center center / 50%

content-box content-box;


background-size 属性

一:length

该属性值是设置背景图像的宽度和高度的,第一个值是宽度,第二个值是设置高度的。如果只设置第一个值,那么第二个值会自动转换为 “auto”;

二:percentage

该属性是以父元素的百分比来设置图片的宽度和高度的,第一个值是宽度,第二个值是高度。如果只设置一个值,那么第二个值会被设置为 “auto”;

三:cover

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

四:contain

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • background是CSS的简写属性,包含了数个属性集。 其可以用来设置一个或多个属性: 有一些我们是很熟悉的...
    DHFE阅读 1,910评论 0 0
  • 1. 定义和用法 background是一个简写属性,可以在一个声明中设置所有的背景属性,可设置的属性如下: 这些...
    lightNate阅读 4,454评论 2 9
  • background应该是CSS里使用频率颇高的属性,简单实用。但参数偏多,本篇就介绍一下background的各...
    张歆琳阅读 4,351评论 4 26
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,812评论 0 2
  • 似花还似非花,也无人惜从教坠。抛家傍路,思量却是,无情有思。萦损柔肠,困酣娇眼,欲开还闭。梦随风万里,寻郎去处...
    行走的段子阅读 648评论 0 1