background系列属性
1、background-color背景颜色属性
①颜色表示方法
英语单词:red blue purple skyblue。
rgb:r代表红色 g代表绿色 b代表蓝色 也就是颜色的三原色。
十六进制:#0xff ff ff
2、background-image属性
background-image:url(images/i.jpg);背景天生是会被平铺满的。
3、background-repeat属性
background-repeat:no-repeat;控制background-image里的图片不是平铺满,而是只出现一次。
background-repeat:repeat-x;控制background-image里的图片不是平铺满,而是横向重复。
background-repeat:repeat-y;控制background-image里的图片不是平铺满,而是纵向重复。
4、要妙用repeat这个属性 用小图做大背景
5、background-position背景定位属性(重点)
X Y
①background-position:向右移动量 向下移动量; 移动量可以是负数 例如:
②css精灵:又叫css雪碧技术,是一种css图像合并技术。该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。
Css精灵有什么优点,就是减少了http请求。比如4张小图片,原本需要4个http请求。但是用了css精灵,小图片变为了一张图,http请求只有1个了。
③用单词表示:background-position:描述左右的单词 描述上下的单词。比如:background-position:center top;左右居中 上下居顶。
用途:大背景图的溢出处理。
这个属性经常用于图片比浏览器大得多的时候,但是我们还想让图片居中的时候,这个时候就需要background-position去定位一下,利用center属性就能搞定。例如暗黑破坏神 台湾的官网背景图。
这个属性还有用于通栏banner图。其实这个banner图是一个超长的图。
6、background-attachment属性
这个属性设置为fixed,作用就是用于背景图(没有设置no-repeat的背景图)不随着滚动条滚动,但是表层的文字可以随着滚动条的滚动而滚动。
7、background综合属性
background:red url(1.jpg) no-repeat 100px 100px fixed;
等价于:
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;
background系列属性的更多相关文章
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- background复合属性详解(上):background-image
background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
- CSS探案之 background背景属性剖析
首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...
- 系列属性(offset、scroll、client)
一.offset系列属性 <div id="dv"></div> <!-- 已在style标签里设置div宽高各100px --> <sc ...
- js offset系列属性
offsetParent:返回该元素有定位的父级,如果父级都没有定位则返回body offsetTop:返回元素相对父级(带有定位的父级)上方的偏移 offsetLeft:返回元素相对父级(带有定位的 ...
- background的属性和背景图片定位的实例
本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...
- background相关属性
background-origin: 规定 background-position 属性相对于容器的哪一部分来定位. padding-box 背景图像相对于内边距框来定位:(默认) border-bo ...
随机推荐
- 杂音 & pop 音的解决方法
杂音 & pop 音的解决方法 1. 喇叭有严重的"吱吱"破音,绝大多数的原因有可能在于V(out)电压不稳定,所以最好测一下无负载时的输出电压.同时也可以测量 VCC – ...
- Qt中利用QTime类来控制时间,这里简单介绍一下QTime的成员函数的用法:
Qt中利用QTime类来控制时间,这里简单介绍一下QTime的成员函数的用法: ------------------------------------------------------------ ...
- hash随笔
hash属性是一个可读可写的字符串,是url的锚部分(从#开始).多用于单页面应用中,使其包含多个页面. 定位:通过id来定位 eg: <div id= "part1"> ...
- 转 dos 下的 find 和 重定向
1.find /i "ora-" *.* > check.log 附录: 我对findstr是如此的依赖,以至于当我向各位讲解find命令的时候,我还得老老实实地在cmd窗口 ...
- HDU5908 Abelian Period 暴力
题目大意:将一个数组分成长度为k的几个连续区间,如果每个区间内各个元素出现的次数相同,则称k为一个阿贝尔周期,从小到大打印所有阿贝尔周期,数据间加空格. 题目思路:map+暴力 #include< ...
- UVA 1193 区间相关(greedy)
input n d 1<=n<=1000 n行坐标xi,yi output 位于x轴扫描器的扫描距离为d,至少要多少个扫描器才能扫描到所有坐标 如果无法扫描完输出-1,否则输出扫描器个数 ...
- Java Networking Related (Java Examples in a Nutshell 3rd Edition)
Examples to: Use URL class to parse URLs and download the network resources specified by a URL Use U ...
- linux内核移植到S5pv210
make s5pv210_defconfig 1.System Type ---> (0) S3C UART to use for low-level messages 2.Kernel ha ...
- img图片inline-block总结
<div style="font-size:0;"> <img data-src="http://image.zhangxinxu.com/image/ ...
- android5.0----SVG
SVG ----scalable vector Graphics 可缩放矢量图形 android L 即android 5.0的新特性. 1,SVG是干什么的? 可缩放矢量图形是基于可扩展标记语言(标 ...