CSS中background的用法
CSS中 background 是一个很基本的而且比较常用的样式
background : background-color || background-image || background-repeat || background-attachment || background-size || background-clip || background-position
这个是 background 的几个参数,这些参数并不是都要写上的。
1.background-color: 背景颜色,这里可以写英文,可以写RGB,可以写#xxxxxx
transparent : 背景色透明
2.background-image:背景图片,只能写 none 或者 url (url)
3.background-repeat:背景图象的平铺
repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
4.background-attachment:背景图象的流动性
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
5.background-size : 背景图片尺寸属性
length : 可以是尺寸
percentage : 百分比
auto : 自动(默认值)
cover : 按比例调整背景图片,这个属性值跟contain正好相反,背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话,那么背景图片就会被咔嚓。覆盖,背景要覆盖元素的所有区域,不能有空白出现。
contain : 按比例调整背景图片,使得其图片宽高比自适应整个元素的背景区域的宽高比,因此假如指定的图片尺寸过大,而背景区域的整体宽高不能恰好包含背景图片的话,那么其背景某些区域可能会有空白。包含,整个背景图都要被包含在元素内,没有超出的部分。
6.background-origin :该属性指定了背景从哪个区域(边框、补白或内容)开始绘制
padding : 背景从内边距开始绘制
border : 背景从边框开始绘制
content : 背景从内容开始绘制
7.background-clip :该属性指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关
padding : 背景在内边距区域显示
border : 背景在边框区域显示
content : 背景在内容区域显示
8.background-position :背景图象的位置
length : 百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right
background-position 这个参数很有意思,一般可能很少人用到,不过这个参数理解好了,确实有很大的用处,首先background-position有2个参数:background-position:(X Y),这个一般有2种情况,一个是div比背景图片大,则用这个属性背景图片会在div里浮动,如div比背景图片小,那么就变成了背景图片的变幻,具体的用代码说明吧。
这个是做的一个圆角的div,
<div style="width:700px">
<div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat;">
<div style="background:transparent url(img/corners.gif) no-repeat right -8px; padding-right:8px;">
<div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 0;" ></div>
</div>
</div>
<div style="padding-left:4px; background:transparent url(img/l.gif) repeat-y;">
<div style="padding-right:4px;background:transparent url(img/r.gif) repeat-y right;">
<div style="background:#eee url(img/tb.gif) repeat-x 0 -16px;">fdsafasdfasd<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf</div>
</div>
</div>
<div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat 0 -16px;">
<div style="background:transparent url(img/corners.gif) no-repeat right -24px; padding-right:8px;">
<div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 -8px;" ></div>
</div>
</div>
</div>
最新文章
- gulp基本介绍
- 第三方Girdview中文件下载的方法,以及js显示图片
- sysctl kernel parameter Optimization note
- {CSDN}{英雄会}{砍树、石子游戏}
- HTML5 manifest离线缓存
- NAVICATE 修改存储过程提示PROCEDURE _Navicat_Temp_Stored_Proc already exists 解决方法
- 字符串(广义后缀自动机):BZOJ 3926 [Zjoi2015]诸神眷顾的幻想乡
- Spring IOC容器中Bean的生命周期
- Windows7 64位安装最新版本MySQL服务器
- 符合Chrome58的证书制作
- ProcessHacker学习笔记
- 《剑指offer》-左旋转字符串
- 永恒之蓝msf下 ms17_010 (64位kali下安装wine32)
- vue-cli静态资源处理
- Windows控制程序网站带宽及Qos(TOS或DSCP)
- 扩展欧几里得(E - The Balance POJ - 2142 )
- [转]awesome-tensorflow-chinese
- 【oracle】入门学习(二)
- mysqldump 导出统一限制每张数据表导出的记录数
- 利用OCR文字识别+百度算法搜索,玩转冲顶大会、百万英雄、芝士超人等答题赢奖金游戏
热门文章
- .NET简介
- mysql全局权限账户%登录不上ERROR 1045 (28000): Access denied for user &#39;zzq&#39;@&#39;localhost&#39; (using password: YES)
- window下eclipse搭建hadoop环境
- Windows Nginx 教程
- Arcpy里莫名其妙的字段类型(Field type)
- moment.js 快捷查询
- myeclipse 报错:Set project compiler compliance settings to &#39;1.5&#39;
- 解决vcenter 6.0 vcsa安装插件第二个的时候报错的问题
- linux netstat 统计连接数查看外部(转)
- Tomcat 配置访问限制:访问白名单和访问黑名单