13.background背景图
来源:互联网 发布:大唐电信数据所 待遇 编辑:程序博客网 时间:2024/05/16 14:44
background背景图
属性解释
- background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项:
- background-color 设置背景颜色
- background-image 设置背景图片地址
- background-repeat 设置背景图片如何重复平铺x/y轴平铺
- background-position 设置背景图片的位置负值向上,正值向下。
- background-attachment 设置背景图片是固定还是随着页面滚动条滚动 fixed不浮动、scroll、auto浮动
属性连写
- 实际应用中,我们可以用background属性将上面所有的设置项放在一起,而且也建议这么做,这样做性能更高,而且兼容性更好,
- 比如:“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”,
- 这里面的
- “#00ff00”是设置background-color;
- “url(bgimage.gif)”是设置background-image;
- “no-repeat”是设置background-repeat;
- “left center”是设置background-position;
- “fixed”是设置background-attachment,
- 各个设置项用空格隔开,有的设置项不写也是可以的,它会使用默认值。
雪碧图、精灵图sprite(一张大图有多个小图
通过调节背景图的位置,主要节约cpu减少请求次数,提升用户体验性
阅读全文
0 0
- 13.background背景图
- 关于背景图background-image
- 对背景图定位中background
- 用background 显示背景图的部分
- css用一张背景图background-position定位
- 【ibokan】background-position定位一张背景图
- png背景图在IE6下无法用background-position定位?
- CSS3 background-size让背景图寸尺大小可控
- 完美的背景图全屏css代码 – background-size:cover?
- 完美的背景图全屏css代码 – background-size:cover?
- 完美的背景图全屏css代码 – background-size:cover
- HTML中background-repeat 重复背景图属性的的作用
- 完美的背景图全屏css代码 – background-size:cover?
- CSS 背景background,精灵spirit(移动背景图位置来实现)
- CSS入门之背景样式实例,背景图滚动:background-attachment,background复合样式
- 关于在ie8下背景图不识别background-size的问题
- HTML&CSS——对背景图定位中background-position属性的自我理解
- IE8 下面 background 背景图没显示?都是空格惹的祸
- POJ 2533 Longest Ordered Subsequence(LIS)
- 项目的生命周期
- 4.3.1深度定时器(Timer in Depth)
- python/caffe/_caffe.cpp:47:31: fatal error: numpy/arrayobject.h: 没有那个文件或目录
- 尺取法入门--poj 3061
- 13.background背景图
- STM32通过中断方式实现USART1通信
- 字节流
- ASP.NET WebApi实现请求频率限制
- 二级java程序设计--图形用户界面(2)
- CTF web题总结--任意文件下载
- eclipse中的创建maven项目,无法添加src/main/java等source folder
- 遍历数组
- 深入理解分布式事务,高并发下分布式事务的解决方案