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;

转载于:https://www.cnblogs.com/sylz/p/5712775.html

background系列属性相关推荐

CSS——background系列属性
关于颜色能够用英语单词来表述的颜色都是简单的颜色用rgb方法来表示: 光学显示器每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同颜色. 用逗号隔开, r, g, b的值,每个值的取值范围 ...
background系列属性（background-color背景颜色、background-image背景图片、background-repeat重复方式以及background-position）
background-color背景颜色背景颜色属性. css2.1中,颜色的表示方法有哪些?一共有三种:单词.rgb表示法.十六进制表示法用英语单词来表示: 能够用英语单词来表述的颜色,都是简单 ...
Background 全属性实例图解（10种全）(一)
Background 全属性实例图解(10种全)(一) 本文目录: 一.background属性: (1).属性描述 (2).background属性使用示例 (3).background动画属性 ( ...
（15）css常用样式—background背景属性
一.背景属性概述 CSS 中除了布局类属性,还需要添加一些背景类的内容进行页面的修饰,从而让网页变得更加的美观. CSS 中通过 background 属性来设置背景,它是一个综合属性,可以拆分成多 ...
网页特效offset、client、scroll系列属性的作用
元素偏移量 offset 系列可以动态的得到元素的位置(偏移).大小等获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度) 注意:返回的数字都不带单位 offset系列属性作用 el ...
【前端小点】CSS之background背景属性详解
本篇文章我们将一起展开来看css的background背景属性. 一.结构创建DIV <div class="div1">1 </div> 样式 widt ...
background 背景属性详解
background 背景属性我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
html里background颜色属性,background属性值
js怎么获取css样式里的background属性值呢? ss文件中如何得到某个属性值: 一.getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值, 返回的是一个CSS样式 ...
background复合属性顺序_background：常用背景属性（复合属性）
定义和用法 background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性:background-color | 背景颜色 background-position | 背 ...

background系列属性

background系列属性相关推荐

最新文章

热门文章