美文网首页前端笔记CSS3
CSS的background简写方式

CSS的background简写方式

作者: RunningCoderLee | 来源:发表于2015-12-01 16:10 被阅读6907次

在CSS2.1里,background属性的简写方式包含五种属性值,从CSS3开始,又增加了3个新的属性值,加起来一共8个。

CSS2.1

  • background-color 使用的背景颜色。
  • background-image 使用的背景图像。
  • background-repeat 如何重复背景图像。
  • background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
  • background-position 背景图像的位置。

CSS3

  • background-size 背景图片的尺寸。
  • background-origin 背景图片的定位区域。
  • background-clip 背景的绘制区域。

简写形式

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

需要注意的是里面的/,它和font以及border-radius里简写方式使用的/用法相似。/可以在支持这种写法的浏览器里在background-position后面接着写background-size
除此之外,你也可以增加另外两个描述它的属性值: background-originbackground-clip

示例用法

.example {
  background: aquamarine 
              url(img.png) 
              no-repeat 
              scroll 
              center center / 50% 
              content-box content-box;
}

相关文章

  • CSS的background简写方式

    在CSS2.1里,background属性的简写方式包含五种属性值,从CSS3开始,又增加了3个新的属性值,加起来...

  • 学习笔记-CSS-2017.2.13

    一、CSS 背景 当使用简写属性时,属性值的顺序为:background-color; background-im...

  • css中background简写属性

    在CSS2.1里,background属性的简写方式包含五种属性值,从CSS3开始,又增加了3个新的属性值,加起来...

  • web前端入门到实战:css常用样式背景background如何

    css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个...

  • 17-18日作业

    1.什么是css语法? 2.列举常见的css选择器? 3.background属性如何简写? 4.文本的属性有哪些...

  • 第二次作业

    1.什么是css语法? 2.列举常见的css选择器? 3.background属性如何简写? 4.文本的属性有哪些...

  • CSS揭秘

    1.backgrouond简写 在background简写属性中指定background-sizing时,需要提供...

  • 任务九-主线

    CSS常见样式入门(下) 背景background: 简写属性,作用是将背景属性设置在一个声明中backgroun...

  • background简写笔记

    css设置元素背景常用的属性: 常用基本就这6个,简写顺序就是以上顺序,如: 这里要注意的是,position和s...

  • css中font、background、border样式的简写

    font样式简写: font:[font-style] [font-weight] [font-size] / [...

网友评论

  • 空白处_7693:需要注意的是里面的/,它和font以及border-radius里简写方式使用的/用法相似。/可以在支持这种写法的浏览器里在background-position后面接着写background-size。这个知识点可以说一下吗?不太明白,我设置url(images/bianjiao_02.png) no-repeat scroll 100% 100% / 100% padding-box 后,背景去放大了

本文标题:CSS的background简写方式

本文链接:https://www.haomeiwen.com/subject/kzvjhttx.html