背景图片_伪类选择器

1.background背景图片

background-image: url(地址); 背景图片平铺,默认是铺满整个父区域.

注意地址的准确,和img有点点不一样.

background-repeat: no-repeat; 背景图片不平铺,只显示一张,不管一张图够不够 铺满.

background-repeat: repeat-x; 横向平铺

background-repeat: repeat-y; 纵向平铺

background-repeat: cover; 用一张图片直接铺满父区域.

background-size: 100% 50%; 设置背景图片的宽高按父元素的百分比平铺

background-size: 100% ; 图片背景宽度为父元素的百分百;

background-postion: 100px 50px; 背景图片位置 x y 方向移动

background-postion: 100px; 背景图片 x y 的位置都为100px;

background-postion-x: 100px; 背景图片x 的位置为 100px;

2.css文件引用.

<link href="地址"  rel="stylesheet">

3.背景参数的复合性型写法(重点)

color颜色 image图片地址 repeat平铺方式 position/size位置/大小

background: red url(地址) no-repeat 100px 50px/100px;

上面的参数可以省略,但不能换顺序.

4.附着

background-attachment: fixed;  固定再窗口位置,跟着窗口动
                        scroll;   不跟着窗口走;
background-clip: boder-box;  相当于图片站位区域,包括边框以内的区域
                 padding-box;包括内边距以内的区域,都被图片占据
                 content-box;只有内容区域被站位 

background-origin: content-box; 设置原地从content的左上角开始
                   padding-box;设置原点从padding的左上角开始,默认值
                   boder-box;设置原点从boder的左上角开始

5.伪类选择器

div:hover {}     div可以是其他标签名.hover鼠标移入时展示设置的效果

设置的效果可以是各种样式.

5.超链接易混淆

<link href="地址" rel="stylesheet">
<a href="地址">名字</a>
<img src="地址" width=" "  height=" " alt=" ">
backgroun: color url() position/size;