搜索
首页web前端html教程CSS3 background介绍_html/css_WEB-ITnose

background应该是CSS里使用频率颇高的属性,简单实用。但参数偏多,本篇就介绍一下background的各种特性。

CSS3之前主要有5个属性:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS3增加了3个属性:

  • background-origin
  • background-clip
  • background-size

background-color:背景色,默认值transparent,不赘述。

background-image:背景图,默认值none。可用url指定图片地址,可以是相对地址,也可以是绝对地址,不赘述。

background-repeat:no-repeat,repeat-x,repeat-y,repeat。默认值repeat。CSS3增加了两个值space,round。前4个效果见下图。左图no-repeat就是背景图的原始尺寸,依次是水平重复,垂直重复,全方位重复。有个两个细节要注意:

  1. 背景图是起始于盒子模型中padding-box的左上角,而非content区域的左上角。如果你设置了padding,padding区域也会被背景图覆盖。
  2. 重复都是正向反向两端重复。例如repeat-x,往右重复效果很明显,但仔细看发现也会往左重复(左边框底下也有图片),不要误以为只往右重复。同理repeat-y,也会往上重复(上边框底下也有图片)。同理repeat是全方位重复,4条边框底下均有图片

CSS3中可以允许设两个值,分别代表水平和垂直的重复。例如background-repeat: repeat repeat;等价于background-repeat: repeat;。看上去好像然并卵,要水平或垂直重复已经有repeat-x或repeat-y了,允许设两个值究竟有什么用呢?作用是和下面CSS3里新增的两个值(space,round)结合起来用,如果只允许单值是实现不了水平/垂直单向space或round效果的。

space表示两端平铺,保持背景图原始尺寸。round表示两端对齐,会适当拉伸背景图。例如左图background-repeat: space no-repeat;水平两端平铺,垂直不重复。右图background-repeat: round no-repeat;水平两端对齐,垂直不重复。左图好理解,不赘述。右图round no-repeat和repeat-x看起来效果差不多,但仔细看其实是有区别的,round会拉伸图片以实现两端对齐,但repeat-x是保持背景图原始尺寸的前提下简单重复。

用单值的话,就是水平垂直两方向重复。例如左图background-repeat: space;。右图background-repeat: round;。

background-attachment:scroll(默认值),fixed。表示背景图是否随页面滚动或是固定。通常fixed用在html或body上。

background-position:背景图水平和垂直起点。默认值0% 0%,即起点是在padding-box的左上角。可设百分比也可设px值。正值会往正向偏移(以左上角为起点,往右和往下是正反向,往左和往上是反方向)。例如左图background-position: -10px 10px;右图background-position: 10px -10px;(为演示效果均设成no-repeat)。50%可以用关键字center代替。

CSS3中增强了该属性,将两值扩展为四值,如background-position: left 10px top 10px;,前2个代表水平方向,后两个代表垂直方向。这样背景图的起点将不再局限于左上角,你可以更加灵活地掌控背景图的位置。

background-position: left 10px top 10px;background-position: left 10px bottom 10px;background-position: right 10px top 10px;background-position: right 10px bottom 10px;

上面这5个属性是CSS1里就定义了,CSS3只不过做了适当的扩展。下面是介绍的是CSS3里新增的属性。

background-origin:content-box,padding-box(默认值),border-box。该属性决定了背景图片原点在盒子模型哪里。默认值padding-box表示背景图原点在content+padding区域。同理content-box表示背景图原点在content区域。border-box表示背景图原点在content+padding+border区域。左图content-box(div有5px的padding),中图padding-box,下图border-box(可以看出背景图原点是在边框外经处,背景图部分跑到了边框底部)

background-clip:content-box,padding-box,border-box(默认值)。背景剪裁区域。我看完W3C简单的说明和例子后,发现该属性和上面background-origin非常像,实在难以理解区别在哪里。实际上是有区别的。background-origin是确定背景图片的原点起点位置,而background-clip是指背景剪裁区域。前者的对象是背景图片,后者的对象是整个背景。两者的区别如下图:

/* 左图 */background: red url(bg50.png) no-repeat;background-origin: content-box;/* 右图 */background: red url(bg50.png) no-repeat;background-clip: content-box;

同样设成了content-box。左图background-origin将背景图片的原点设为content区域左上角。右图background-clip设为content-box的意思是:将content区域外的所有背景相关内容(包括背景色和超出部分的背景图片)剪裁掉。

在上面代码的基础上,将左图background-origin和右图background-clip都改成content-box

左图background-origin将背景图片的原点设为padding-box区域左上角。右图background-clip设为padding-box的意思是:将padding-box区域外的所有背景相关内容剪裁掉,看效果只剪裁掉了border下面的背景色,而背景图片没有被剪裁。道理很简单,因为背景图片默认的background-origin就是padding-box,因此没有超出padding-box区域的部分。

在上面代码的基础上,将左图background-origin和右图background-clip都改成border-box

原理和上面都一样,不再赘述。

background-size:px值,%百分比,cover,contain,auto(默认值)。在CSS2.1之前,我们是没有办法控制背景图片的大小的。CSS3可以用该属性来控制背景图片的大小。例如background-size: 10px 20px;第一个是width,第二个是height,如果只设一个值,第二个值将成为auto(意思是保持原始宽高比例)。

关键字cover将按比例缩放图片来填充满整个背景区域。contain将保持原图比例的前提下,缩放图片来填充背景区域。左图background-size: cover;,右图background-size: contain;

原图是150*200px,cover通过缩放会完全充满背景区域,但可能会出现图片扭曲或截断,因此多用在背景图片比容器小的情况下。contain会保证原图比例的前提下尽量填满背景区域,但可能出现没完全填满的情况,因此多用在背景图片比容器大的情况下。

小Tips:嫌cover,contain自适应缩放不居中的话,可以加上background-position: center;

至此background的各属性介绍完毕。我们可以单独指定background各属性,也可以将原始的5个属性合并到一起指定,CSS3新增的3个属性请单独指定。

未指定的属性将被浏览器自动设为默认值。如background: red;等价于background: red none repeat repeat scroll 0% 0%;。CSS3新增的3个属性也会被设为默认值:padding-box border-box auto

下面介绍下CSS3多背景属性

CSS3之前每个容器只能指定一张背景图片,要实现多个背景图片的效果,需要HTML端多个容器叠加,比较麻烦。CSS3开始可以直接在一个容器上指定多张图片。

指定多张图片时,只有background-color属性是无法指定多个的,因为该属性是隶属于容器而非背景图片的。你可以单独为多张图片指定background属性,也可以合并在一起指定。

单独为多张图片指定background属性格式:

background-image: url(bg.png), url(bg50.png), url(bgheader.jpg);background-repeat: repeat-x, repeat-y, no-repeat;background-attachment: scroll, scroll, scroll;background-position: center, right 10px bottom 10px, left top; background-origin: content-box, padding-box, border-box;background-clip: border-box, padding-box, content-box;background-size: auto, 50% auto, 50% 50%;

各属性第一个逗号是图1,各属性第二个逗号是图2,各属性最后一个值是图3。上面代码最终效果是图4。从图中也可以看出层叠关系,第一个逗号的图1在最上层,依次往下是第二个逗号的图2和最后一个值的图3。当然最底层肯定是容器的background-color。

你也可以将各属性合并在一起写,中间仍旧用逗号隔开,效果和上图4是一样的:

background: url(bg.png) repeat-x scroll center,            url(bg50.png) repeat-y scroll right 10px bottom 10px,            url(bgheader.jpg) no-repeat scroll left top;background-origin: content-box, padding-box, border-box;background-clip: border-box, padding-box, content-box;background-size: auto, 50% auto, 50% 50%;

不论你单独写还是合并写,最后加一个background-color属性(如果容器需要背景色)。

总结

background应该算CSS里一个比较基础的属性,本篇更多的是给自己零散的知识点做一个总结。以后对background有什么新的发现都可以往这篇里增加,这就像一颗种子,假以时日终会长成一颗小树苗。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
如何验证您的HTML代码?如何验证您的HTML代码?Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),