背景尺寸 位置 裁切
**background-size:**规定背景图像的尺寸。
background-size: 200px 200px;
background-size: cover;
background-size: contain;
background-origin:背景图的填充位置。默认值: padding-box
值 描述
padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
background-clip背景图的裁切位置
border-box 默认值。背景绘制在边框方框内(剪切成边框方框)。
padding-box 背景绘制在衬距方框内(剪切成衬距方框)。
content-box 背景绘制在内容方框内(剪切成内容方框)。
注意:复合样式的时候,第一个是位置,第二个是裁切
background: url(http://img95.699pic.com/element/40101/3325.png_300.png) no-repeat;background-origin: padding-box;background-clip: content-box;
等价于
background: url(http://img95.699pic.com/element/40101/3325.png_300.png) no-repeat padding-box content-box;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{width: 500px;height: 400px;border: 40px solid red;padding: 50px;background: url(http://img95.699pic.com/element/40101/3325.png_300.png) no-repeat;
/* background-size: 200px;} */
background-size: contain;}
.box2{width: 500px;height: 400px;border: 40px solid red;padding: 50px;background: url(http://img95.699pic.com/element/40101/3325.png_300.png) no-repeat;background-origin: padding-box;background-clip: content-box;
}
/* .box2{width: 500px;height: 400px;border: 40px solid red;padding: 50px;background: url(http://img95.699pic.com/element/40101/3325.png_300.png) no-repeat padding-box content-box;
} */
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
CSS渐变
linear-gradient:线性渐变,需要添加到background-image
属性上,渐变的0度是在页面在下边,正值会按照顺时针旋转,负值换逆时针旋转
background-image: linear-gradient(red,blue,yellow,green);
渐变轴为90度,从蓝色渐变到红色
background-image: linear-gradient(90deg, blue, red);
从右下到左上、从蓝色渐变到红色
background-image: linear-gradient(to left top, blue, red);
/从下到上,前25%为红色、高度25%位置到75%位置是红色渐变开始蓝色结束,后25%为蓝色。
background-image: linear-gradient(red 25%,blue 75%);
radial-gradient:径向渐变跟上面一样
background-image: radial-gradient(red 25%,blue 50%,yellow 75%);}
综合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{width: 300px;height: 300px;border: 1px black solid;
/* background-image: linear-gradient(red,blue,yellow,green);} */
background-image: linear-gradient(red 25%,blue 75%);}
.box1{width: 300px;height: 300px;border: 1px black solid;
background-image: radial-gradient(red 25%,blue 50%,yellow 75%);}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
渐变的加载进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.progress{width: 300px;height: 30px;border: 1px black solid;margin: 100px;background-image: linear-gradient(to right top,blue 25%,yellow 50%,red 75%,orange 100%);background-size: 30px;
animation: move infinite 2s linear;}
@keyframes move {
0%{background-position: 0.0;}
100%{background-position: 300px 0;}
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>