背景处理
默认加载原图,图片左上角和标签的左上角对齐
图片
- 设置背景图片:
background-image: url(3.jpg);
- 设置背景图片加载大小,百分比(像素也可以):
background-size: 100% 100%;
- 设置图片不重新加载(也可以只在x方向和y方向上加载填充 background-repeat: repeat-y;)
background-repeat: no-repeat;
- 设置图片的位置(即是背景图片中心在标签的位置),百分比,像素都可以:
background-position: 30% 50%
设置图片
背景颜色(图片)-线性渐变
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
颜色大于等于2个
- 线性渐变:
background-image: linear-gradient(red,blue)
- 设置渐变的宽度:
background-image: linear-gradient(red 50%,blue)
- 设置从哪个方向开始渐变:
background-image: linear-gradient(to right,red blue)
- 设置角度;
background-image: linear-gradient(10deg red ,blue)
- 径向渐变:(用法和线性渐变一样)
background-image: radial-gradient(red,blue);
从大图中抠小图:
示意图:
一个实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片</title>
<style media="screen">
div{
/*设置一个小框,用于加载小图*/
height: 100px;
width: 100px;
border: 2px solid red;
background-image: url(144.jpg);
/*设置图片不重新加载*/
background-repeat: no-repeat;
/*设置这个图片的大小*/
background-size: 200px 200px;
/*设置这个图片偏移情况*/
background-position: -100px -100px;
}
</style>
</head>
<body>
<div class="">
</div>
</body>
</html>
原图:
抠出来的小图:
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
防止这种滚动
background-attachment:fixed