本文更新版本 ,请跳转

所有背景属性都不能继承。

1.    background-color

所有元素都能设置背景颜色。

background-color的默认值是transparent;也就是说,如果一个元素没有指定背景颜色,那么背景就是透明的,这样其祖先元素的背景才能可见。

2.    background-image

所有元素都能设置背景图像;

背景图像可以设置多个,中间用逗号隔开;背景图像会层叠,写在前面的层次在上面。

3.    background-repeat

repeat(默认)/no-repeat/repeat-x/ repeat-y

4.    background-attachment

scroll(默认)/fixed

5.    background-position

像素法:以图像左上角为起点,第一个值为水平移动的距离,第二个值为垂直移动的距离;若只规定一个值,第二个值默认为50%。

百分比法:百分比同时应用于图像和元素,相应的点重合进行定位。如果只指定一个百分数,意味着垂直方向为50%。

关键字法:top、right、bottom、left、center进行组合定位;若只规定一个值,第二个值默认为center。

注意:background-position可以为负值。

在默认情况下,背景颜色延伸到边框下面,背景图像在padding区域的左上角。

6.    background-size

设置背景图像的尺寸;默认值为auto。

像素法:第一个值设置宽度,第二个值设置高度;若只有一个值,第二个值为auto。

百分比法:以父元素的宽度和高度以基准来计算。

关键字cover,不改变图像宽高比例,在水平和垂直方向都铺满整个元素,有可能导致一部分图像溢出。

关键字contain,不改变图像宽高比例,尽可能拉伸,直到某一方向铺满整个元素,有可能导致另一方向没有铺满。

7.    background-origin

定义背景图像的初始位置

border-box,边框左上角。

padding-box,padding区域左上角;默认值。

content-box,内容区左上角。

8.    background-clip

The CSS3 background-clip property specifies the painting area of the background.

The property takes three different values:

  • border-box - (default) the background is painted to the outside edge of the border
  • padding-box - the background is painted to the outside edge of the padding
  • content-box - the background is painted within the content box

(英文的解释得比较清楚)

(英文都是从W3Schools Online搬运)

关于background-origin和background-clip,它们是相互独立的,互不干扰。

关于background的CSS写法,个人认为应该逻辑明确、层次分明;具体而言:

background定义背景图像,background-color定义背景颜色,background-clip定义背景显示区域。

(个人见解,仅供参考)

Full Size Background Image

If we want to have a background image on a website that covers the entire browser window at all times.

The requirements are as follows:

  • Fill the entire page with the image (no white space)
  • Scale image as needed
  • Center image on page
  • Do not cause scrollbars

The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:

 html {
background: url(img_flower.jpg) no-repeat center fixed;
background-size: cover;
}

小tips:

利用背景图像的水平平铺,实现波浪式的边框效果。

(目前只有想法,还没找到符合需求的图像。)

CSS background汇总的更多相关文章

  1. 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

  2. CSS 高级技巧汇总

    在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not ...

  3. css优先级汇总

    原文:css优先级汇总 我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴 ...

  4. CSS 技巧汇总

    CSS 选择符优先级 !important 声明>内联样式(style)>id 选择符(#id)>类选择符(.class)=伪类选择符(:hover )=属性选择符([attr] ) ...

  5. CSS hack 汇总

    1, IE条件注释法,微软官方推荐的hack方式. <!]> IE6以及IE6以上版本可识别 <![endif]--> <!]> 仅IE7可识别 <![end ...

  6. CSS 背景-CSS background

    这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背 ...

  7. CSS background 属性 总结

    CSS background 属性总结

  8. HTML CSS——background的认识(一)

    今天回归bug时无意间看到了样式表中background属性,如今总结一下: 1.background-color:设置元素的背景色.其值能够为:color-name.color-rgb.color- ...

  9. css background之设置图片为背景技巧

    css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...

随机推荐

  1. PAT甲题题解-1044. Shopping in Mars (25)-水题

    n,m然后给出n个数让你求所有存在的区间[l,r],使得a[l]~a[r]的和为m并且按l的大小顺序输出对应区间.如果不存在和为m的区间段,则输出a[l]~a[r]-m最小的区间段方案. 如果两层fo ...

  2. JS高级程序设计学习笔记1

    javascript产生的原因: 在拨号上网时代,表单数据必须发送到服务器端才能验证输入值得有效性,JavaScript的研发就是为了解决这个问题,以便在客户端就验证输入值的有效性. ECMAScri ...

  3. .net中操作Visual SourceSafe

    最近整理一些资料,发现以前写的一段代码,提供对微软的版本管理软件visual sourcesafe的一些操作.以下简称vss. 想起以前写的时候,因为资料比较匮乏,只能边研究边测试,走了不少弯路. 由 ...

  4. Spring学习总结之面向切面(AOP)

    AOP术语 通知(advice):定义切面是什么以及什么时候使用 连接点(join point):应用在执行过程中能够插入切面的点 切点(pointcut):切点的定义会匹配通知所要织入的一个或多个连 ...

  5. 《Linux 内核分析》第五周

    [李行之原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] <Linux内 ...

  6. someday团队Postmortem(事后诸葛亮会议)

    一.会议相关介绍: 时间:2018年1月12日 地点:第九实验楼五楼机房 参会人员:someday团队全体成员 二.每个成员在beta阶段的实践和alpha阶段有何改进? (一)设想和目标: 我们的软 ...

  7. RabbitMQ None of the specified endpoints were reachable

    消息队列部署到服务器的时候,需要新增一个用户,然后一定要设置权限.参考一下 https://www.cnblogs.com/gossip/p/4573056.html

  8. 安全相关论文--Security and Dependability

    安全相关论文--Security and Dependability 所参考的文献来自于Kreutz D, Ramos F M V, Esteves Verissimo P, et al. Softw ...

  9. SOA,SOAP,RPC,以及 RPC协议与 REST 协议之间的关系(搜狗)

    web service顾名思义这是一种提供service的形式,而且只能通过http(web)来提供service(web service三要素:SOAP.WSDL(WebServicesDescri ...

  10. UOJ#424 【集训队作业2018】count

    题意 我们定义长度为\(n\),每个数为\(1\sim m\)之间的整数且\(1\sim m\)都至少出现一次的序列为合法序列.再定义\(pos(l,r)\)表示这个序列的区间\([l,r]\)之间的 ...