CSS background 属性详解
语法:
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.
Note: If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.
background-color
Default value: transparent
The background-color property sets the background color of an element.
The background of an element is the total size of the element, including padding and border (but not the margin)(包括内边距和边框).
background-position
The background-position property sets the starting position of a background image(背景图片的开始位置).
Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
background-size
The background-size property specifies the size of the background images.
语法:
background-size: auto|length|cover|contain|initial|inherit;
background-repeat
The background-repeat property sets if/how(背景图片的重复/循环方式) a background image will be repeated.
By default, a background-image is repeated both vertically and horizontally.
Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
background-origin
Default value: padding-box
The background-origin property specifies where the background image is positioned.
Note: If the background-attachment property is set to "fixed", this property has no effect.
background-origin: padding-box|border-box|content-box|initial|inherit;
background-clip
The background-clip property specifies the painting area of the background.
background-clip: border-box|padding-box|content-box|initial|inherit;
background-attachment
The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
background-attachment: scroll|fixed|local|initial|inherit;
CSS background 属性详解的更多相关文章
- CSS中background属性详解
CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...
- [转]CSS vertical-align属性详解 作者:黄映焜
CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜 前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...
- css 12-CSS3属性详解:动画详解
12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...
- css 11-CSS3属性详解(一)
11-CSS3属性详解(一) #前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 ...
- css 14-CSS3属性详解:Web字体
14-CSS3属性详解:Web字体 #前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体.从此,把特殊字体处理成图片的方式便成为了过去. ...
- css display属性详解
css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...
- CSS透明属性详解代码
透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 代码如下: .transparent_class { filter:alpha(opacity=50); -moz-opaci ...
- CSS边框-属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- css float属性详解
定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非 ...
随机推荐
- (转)Asp.Net Mvc视图引擎Razor介绍
Asp.Net Mvc视图引擎Razor介绍 1.Razor介绍 程序园原创,转载请注明:http://www.kwstu.com/ArticleView/dabaomvc_2014082408205 ...
- django blank
null: If True, Django will store empty values as NULL in the database. Defaultis False. 如果为True,空值将会 ...
- Android四种跨进程通信
由于android系统中应用程序之间不能共享内存.因此,在不同应用程序之间交互数据(跨进程通讯)就稍微麻烦一些.在android SDK中提供了4种用于跨进程通讯的方式.这4种方式正好对应于andro ...
- Javac之关于方法的调用1
方法的调用从Attr类的visitApply()方法进入,如下: /** Visitor method for method invocations. * NOTE: The method part ...
- ehcache 集群使用 rmi方式 有图有真想
来源:http://www.tuicool.com/articles/MJzYZbR ehcache 有几种方式集群 ,rmi,jgroup还有jms:这里讲一下ehcache的使用 ehcache ...
- windows10安装tensorflow CPU版本
1.先安装python3.6版本 a.安装完成后在cmd中输入python,如果出现python命令行模式,则说明python安装成功. 2.在cmd中输入pip3 install --upgrade ...
- IDEA的学习总结
IntelliJ IDEA是一款非常优秀的JAVA编辑器,初学都可会对其中的一些做法感到很别扭,刚开始用的时候我也感到很不习惯,在参考了网上一些文章后在这里把我的一些经验写出来,希望初学者能快速适应它 ...
- Tomcat源码分析——类加载体系
前言 Tomcat遵循J2EE规范,实现了Web容器.很多有关web的书籍和文章都离不开对Tomcat的分析,初学者可以从Tomcat的实现对J2EE有更深入的了解.此外,Tomcat还根据Java虚 ...
- 编译可移植的python
1. 在低版本系统机器上,编译python: cd Python-2.7.15/Modules vim Setup.dist 修改下述代码: ########### sed -i 's/#SSL=\/ ...
- HTTP协议状态码学习
一直以来都在追求实战,从而忽视了对理论知识的深入学习和理解.这并不可怕,可怕的是当意识到自己的不足时,没有行动. 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明 ...