多学一点-css属性background

background是一个复合属性,其实有很多跟背景呈现相关的其它属性我们平时使用的时候都忽略掉了,今天我们就来好好学习一下background。

1、backgournd属性

  • background 简写属性在一个声明中设置所有的背景属性,可以设置以下属性。
  • background-color:规定要使用的背景颜色。
  • background-position:规定背景图像的位置。
  • background-repeat:规定如何重复背景图像。
  • background-image:规定要使用的背景图像。
  • background-attachment:规定背景图像是否固定或者随着页面的其余部分滚动。
  • background-clip:规定背景的绘制区域。【css3】
  • background-size:规定背景图片的尺寸。【css3】
  • background-origin:规定背景图片的定位区域(影响:background-position、background-size)。【css3】
    接下来仅介绍这些属性常见的属性值,W3School有部分属性值不全,这些属性值达到的效果请用浏览器开发者工具调试。

1.1 background-color

  • 设置元素的背景颜色;
  • 默认值:transparent。


    image.png

1.2 background-position

  • 设置背景图像的起始位置(相对于background-origin来定位)
  • 是background-position-x、background-position-y的简写属性;
  • 默认值:0% 0%。


    image.png

1.3 background-repeat

  • 设置是否及如何重复背景图像;
  • 默认值:reapeat(在水平方向和垂直方向重复)。


    image.png

1.4 background-image

  • 为元素设置背景图像;
  • 默认地,背景图像位于元素的左上角(默认padding-box左上角, 如果background-origin: content-box;则在content-box左上角),并在水平和垂直方向上重复元素。背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
image.png

1.5 background-attachment

  • 设置背景图像是否固定或者随着页面的其余部分滚动(建议一般页面背景图可以设置为fixed,其它模块的背景就用scroll就好了,不然结果肯定会出乎你的意料,试试吧~~~);
  • 默认值:sroll。
    注:初步猜测background-attachment:fixed;是相对body来进行定位的-通过测试chrome和firfox得出。
image.png

1.6 background-clip【css3】

  • 规定背景的绘制区域;
  • 默认值:border-box。


    image.png

1.7 background-size【css3】

  • 规定背景图像的尺寸;
  • 默认值:auto。


    image.png
  • 如果值是百分比,那么百分比是以background-origin指代的盒子的宽高为基准的(默认padding-box);
  • 如果只有一个值,那么另一个值为auto,它的呈现会受有值的那一边的值所影响,同比缩放;
  • 100% 100%,会调整背景图片宽高比来进行缩放使背景图片填满整个背景区域【图片是完整的,但是缩放后图片的宽高比可能会变】
  • cover,会根据图片本身的宽高比将图片填满整个背景区域【图片不一定完整,可能只有部分在背景区域,缩放后的图片宽高比不变】
  • contain,会根据宽高比适当的同比缩放宽高,让宽或高能填满背景区域为止【图片是完整的,缩放后的图片宽高比不变,但是可能会出现图片没有完全填满整个背景区域】

1.8 background-origin【css3】

  • 规定 background-position 属性相对于什么位置来定位;
  • 默认值:padding-box。


    image.png

2、理解几个关键background相关属性

github代码

image.png

3、参考链接

W3School-CSS background 属性

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

推荐阅读更多精彩内容

  • 1. 定义和用法 background是一个简写属性,可以在一个声明中设置所有的背景属性,可设置的属性如下: 这些...
    lightNate阅读 4,445评论 2 9
  • background是CSS的简写属性,包含了数个属性集。 其可以用来设置一个或多个属性: 有一些我们是很熟悉的...
    DHFE阅读 1,910评论 0 0
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,344评论 2 66
  • CSS3对background新加了3个属性,background-origin、background-clip、...
    彬_仔阅读 1,551评论 0 9
  • 朋友推荐――《粤语残片》。 朋友说,不看歌词(粤语)足以感动,能把回忆揪出来的一首歌! 我说,好,如果能揪点肉下来...
    落日芳草香阅读 642评论 0 0