慕课前端入门-CSS背景与渐变
1.CSS背景
1.1.CSS背景图像区域
background-clip属性：指定背景绘制区域
- border-box:边框盒子。从边框开始绘制，边框之外会被裁剪
- padding-box:内边距盒子。从内边距开始绘制，padding之外会被裁剪
- content-box:内容盒子。从内容开始绘制，content之外会被裁剪
示例代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding:0;border: none;}
div{
width: 800px;
height: 400px;
padding:50px;
border:50px solid transparent;
background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598670301812&di=1ea12ffd008f4051c8fd63a385bc6c24&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1405%2F19%2Fc40%2F34408218_1400509117117.jpg") no-repeat center center;
/*background-clip: border-box;*/
background-clip: padding-box;
/*background-clip: content-box;*/
}
span.div_border{
position: absolute;
top:0;
left: 0;
width: 800px;
height: 400px;
padding:50px;
border:50px solid red;
opacity: 0.5;
}
span.div_padding{
position: absolute;
top:50px;
left:50px;
width: 800px;
height: 400px;
border:50px solid green;
opacity: 0.5;
}
</style>
</head>
<body>
<div></div>
<span class="div_border"></span>
<span class="div_padding"></span>
</body>
</html>
示例2:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>background-clip</title>
<style type="text/css">
.border,.padding,.content{/*给最外层的div设置样式*/
width:300px;height:300px;
float:left;margin-left:50px;
}
a{
text-decoration:none;
font-size:30px;
}
.div1,.div2,.div3{/*放置背景图片的div样式*/
width:220px;height:200px;
border:10px solid rgba(0,255,0,0.3);
padding:50px;
background-image:url("http://climg.mukewang.com/582c316e0001fd6507000210.jpg");
margin-top:50px;
display: none;
}
.border:hover div,.padding:hover div,.content:hover div{
display:block;
}
/*补充代码*/
.div1{background-clip: border-box;}
.div2{background-clip: padding-box;}
.div3{background-clip: content-box;}
</style>
</head>
<body>
<div class="border">
<a href="">border-box</a>
<div class="div1"></div>
</div>
<div class="padding">
<a href="">padding-box</a>
<div class="div2"></div>
</div>
<div class="content">
<a href="">content-box</a>
<div class="div3"></div>
</div>
</body>
</html>
1.2.CSS背景图像定位
background-origin属性：设置元素背景片的原始起始位置，偏移量在background中设置。
- border-box:边框盒子。以边框开始位置作为原点
- padding-box:内边距盒子。以内边距开始位置作为原点
- content-box:内容盒子。以内容开始位置作为原点
示例代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding:0;border: none;}
div{
width: 800px;
height: 400px;
padding:50px;
border:50px solid transparent;
background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598670301812&di=1ea12ffd008f4051c8fd63a385bc6c24&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1405%2F19%2Fc40%2F34408218_1400509117117.jpg") no-repeat 50px 100px;
/*background-origin: border-box;*/
/*background-origin: padding-box;*/
background-origin: content-box;
}
span.div_border{
position: absolute;
top:0;
left: 0;
width: 800px;
height: 400px;
padding:50px;
border:50px solid red;
opacity: 0.5;
}
span.div_padding{
position: absolute;
top:50px;
left:50px;
width: 800px;
height: 400px;
border:50px solid green;
opacity: 0.5;
}
</style>
</head>
<body>
<div></div>
<span class="div_border"></span>
<span class="div_padding"></span>
</body>
</html>
作业
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>background-origin</title>
<style type="text/css">
div{
width: 400px;
height: 150px;
padding:10px;
border:10px solid #acacac;
background:url("http://climg.mukewang.com/582c342b0001fd6507000210.jpg") no-repeat center center;
background-origin:padding-box;
}
div:hover{
background:url("http://climg.mukewang.com/582c34220001091605000150.jpg") no-repeat 10px 10px;
background-origin: content-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.3.CSS背景图像大小
background-size属性：指定背景图片大小
- 具体数值
- 百分比
- cover 即将图片等比例缩放以填满整个容器，长和宽至少有一个为100%，另一个可能会超出，超出的部分会被裁剪。
- contain 即将背景图片等比例缩放至某一边紧贴容器边缘位置。长或宽至少有一个为100%，另一个可能会留白
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>background-size</title>
<style type="text/css">
a{text-decoration:none;}
ul{list-style:none;}
div{
background-image:url("http://climg.mukewang.com/582c37e50001b08102000065.jpg");
width:100px;height:100px;
display:none;border:2px solid red;
background-repeat:no-repeat;
}
/*补充代码*/
.length:hover div{
display: block;
background-size:100px 100px;
}
.percent:hover div{
display: block;
background-size:50% 50%;
}
.cover:hover div{
display: block;
background-size:cover;
}
.contain:hover div{
display: block;
background-size:contain;
}
</style>
</head>
<body>
<h2>background-size不同属性值不同效果</h2>
<ul>
<li class="length">
<h3><a href="">100px 100px</a></h3>
<div></div>
</li>
<li class="percent">
<h3><a href="">50% 50%</a></h3>
<div></div>
</li>
<li class="cover">
<h3><a href="">cover</a></h3>
<div></div>
</li>
<li class="contain">
<h3><a href="">contain</a></h3>
<div></div>
</li>
</ul>
</body>
</html>
1.4.CSS多重背景图像
background-image:url(), url();前面的图像会覆盖后面的图像
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 800px;
height: 500px;
background:no-repeat center center;
background-image: url("water.png"),url("wechat.jpeg");
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>background属性</title>
<style type="text/css">
/*此处写代码*/
div{
width: 400px;
height: 300px;
border:20px solid #e87d7d;
paddding:20px;
background: #acacac no-repeat center center;
background-image: url(http://climg.mukewang.com/582c39c00001091605000150.jpg);
background-size: 90% ;
background-origin: padding-box;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div>慕课网</div>
</body>
</html>
1.5 CSS背景整合
背景属性可以在一个声明中设置所有的背景属性
- color:颜色
- position:背景图片位置
- size:图片大小尺寸
- repeat:是否重复
- orgin:定位
- clip：区域
- attachment：状态（随着页面滚屏，还是固定不变）
- image:背景图片的URL
div{
background: #abcdef center 50% no-repeat content-box content-box fixed url();
}
div{
background: #abcdef center no-repeat url();/*css直接完成，下面的机制不一样，建议分开写*/
background-size: 50%;
background-origin: content-box;
background-clip: content-box;
background-attachment: fixed;
}
2.背景渐变
渐变可以在两个或多个指定的颜色之间显示平稳的颜色过渡。
渐变分为2类，线性渐变和径向渐变。
2.1线性渐变
线性渐变是沿着一根轴线来改变颜色，从起点到终点。
语法
//默认从上到下渐变
div.one{
background:-webkit-linear-gradient(color1, color2);
background: -moz-linear-gradient(color1, color2);
background: -o-linear-gradient(color1, color2);
background: linear-gradient(color1, color2);
}
//指定渐变方向
div.two{
background:-webkit-linear-gradient(起始方向, color1, color2);
background: -moz-linear-gradient(终点方向, color1, color2);
background: -o-linear-gradient(终点方向, color1, color2);
background: linear-gradient(to 终点方向, color1, color2);
}
//对角线方向
div.three{
background:-webkit-linear-gradient(起始方向1 起始方向2, color1, color2);
background: -moz-linear-gradient(终点方向1 终点方向2, color1, color2);
background: -o-linear-gradient(终点方向1 终点方向2, color1, color2);
background: linear-gradient(to 终点方向1 终点方向2, color1, color2);
}
//使用角度进行控制 从12点钟到6点，为0-180度；从12点逆时针到6点，是0- -180度。
div.four{
background:-webkit-linear-gradient(135deg,yellow,red);
background: -moz-linear-gradient(135deg,yellow,red);
background: -o-linear-gradient(135deg,yellow,red);
background: linear-gradient(135deg,yellow,red);
}
示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
/*此处写代码*/
div{
float: left;
overflow: hidden;
margin:10px;
width: 300px;
height: 300px;
}
div.one{
background:-webkit-linear-gradient(yellow,red);
background: -moz-linear-gradient(yellow,red);
background: -o-linear-gradient(yellow,red);
background: linear-gradient(yellow,red);
}
div.two{
background:-webkit-linear-gradient(left,yellow,red);
background: -moz-linear-gradient(right,yellow,red);
background: -o-linear-gradient(right,yellow,red);
background: linear-gradient(to right,yellow,red);
}
div.three{
background:-webkit-linear-gradient(right bottom,yellow,red);
background: -moz-linear-gradient(left top,yellow,red);
background: -o-linear-gradient(left top,yellow,red);
background: linear-gradient(to left top,yellow,red);
}
div.four{
background:-webkit-linear-gradient(135deg,yellow,red);
background: -moz-linear-gradient(135deg,yellow,red);
background: -o-linear-gradient(135deg,yellow,red);
background: linear-gradient(135deg,yellow,red);
}
</style>
</head>
<body>
<!--此处写代码-->
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</html>
2.2 控制颜色的分布
/*1.通过百分比来控制颜色的分布，第一个颜色不填默认0，最后一个颜色默认100%。如果不指定百分比，就是等分 */
background: linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
/*2. CSS3线性渐变中的透明度，颜色渐变的透明效果使用rgba（）进行表示，透明度的取值是0~1，如果值是0，那就是纯透明；如果值是1，就是不透明 */
background: linear-gradient(90deg, rgba(255,0,0,0) 20%, rgba(255,0,0,1) 50%, rgba(0,255,0, 0.9) 90%);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
div{float:left;overflow: hidden;margin-right: 10px;}
div.one{
width: 800px;
height: 500px;
background:-webkit-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: -moz-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: -o-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
}
div.two{
width: 800px;
height: 500px;
background:-webkit-linear-gradient(90deg, rgba(255,0,0,0) 20%, rgba(255,0,0,1) 50%, rgba(0,255,0, 0.9) 90%);
background: -moz-linear-gradient(90deg, rgba(255,0,0,0) 20%, rgba(255,0,0,1) 50%, rgba(0,255,0, 0.9) 90%);
background: -o-linear-gradient(90deg, rgba(255,0,0,0) 20%, rgba(255,0,0,1) 50%, rgba(0,255,0, 0.9) 90%);
background: linear-gradient(90deg, rgba(255,0,0,0) 20%, rgba(255,0,0,1) 50%, rgba(0,255,0, 0.9) 90%);
}
</style>
</head>
<body>
<div class="one"></div><br><br>
<div class="two"></div>
</body>
</html>
2.3 线性重复渐变
/*如果要做斑马线效果，一个一个的复制过于繁琐，重复渐变就产生了*/
background: repeating-linear-gradient(90deg, color 长度/百分比, color 长度/百分比 ...);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
div{float:left;overflow: hidden;margin-right: 10px;}
div.one{
width: 400px;
height: 300px;
background:-webkit-repeating-linear-gradient(90deg, red, blue 20%);
background: -moz-repeating-linear-gradient(90deg, red, blue 20%);
background: -o-repeating-linear-gradient(90deg, red, blue 20%);
background: repeating-linear-gradient(90deg, red, blue 20%);
}
div.two{
width: 400px;
height: 300px;
background:-webkit-repeating-linear-gradient(90deg, red, blue 10%, red 20%);
background: -moz-repeating-linear-gradient(90deg, red, blue 10%, red 20%);
background: -o-repeating-linear-gradient(90deg, red, blue 10%, red 20%);
background: repeating-linear-gradient(90deg, red, blue 10%, red 20%);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
2.4径向渐变
从起点到终点、颜色从内到外进行圆形渐变(从中间向外拉)
background: radial-gradients(center, shape size, start-color 长度|百分比, ...)
参数1:圆心的位置，值有center(默认)、bottom、top，也可以使用百分比。这里的百分比是相对元素左上角的位置。如10% 50%是距离左上角横向长度为10%长度，50%高度的位置
参数2:形状、尺寸。形状有circle圆形和ellipse椭圆形(默认)。如果元素宽高一样，参数不管是circle还是ellipse，显示结果都为圆形。
尺寸大小关键字有4个：closest-side: 最近边、closest-corner: 最近角、farthest-side: 最远边、farthest-corner: 最远角
参数3以后：颜色，可以用纯色，也可以用透明色。
近边、近角、远边、远角的示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
div{float:left;overflow: hidden;margin-right: 10px;margin-bottom: 10px;}
div.one{
width: 400px;
height: 300px;
background:-webkit-radial-gradient(10% 70%, circle closest-side, red, blue);
background: -moz-radial-gradient(10% 70%, circle closest-side, red, blue);
background: -o-radial-gradient(10% 70%, circle closest-side, red, blue);
background: radial-gradient(10% 70%, circle closest-side, red, blue);
}
div.two{
width: 400px;
height: 300px;
background:-webkit-radial-gradient(10% 70%, circle closest-corner, red, blue);
background: -moz-radial-gradient(10% 70%, circle closest-corner, red, blue);
background: -o-radial-gradient(10% 70%, circle closest-corner, red, blue);
background: radial-gradient(10% 70%, circle closest-corner, red, blue);
}
div.three{
width: 400px;
height: 300px;
background:-webkit-radial-gradient(10% 70%, circle farthest-side, red, blue);
background: -moz-radial-gradient(10% 70%, circle farthest-side, red, blue);
background: -o-radial-gradient(10% 70%, circle farthest-side, red, blue);
background: radial-gradient(10% 70%, circle farthest-side, red, blue);
}
div.four{
width: 400px;
height: 300px;
background:-webkit-radial-gradient(10% 70%, circle farthest-side, red, blue);
background: -moz-radial-gradient(10% 70%, circle farthest-side, red, blue);
background: -o-radial-gradient(10% 70%, circle farthest-side, red, blue);
background: radial-gradient(10% 70%, circle farthest-side, red, blue);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
2.5 控制颜色的分布
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
div{float:left;overflow: hidden;margin-right: 10px;}
div.one{
width: 400px;
height: 300px;
background:-webkit-radial-gradient(10% 50%, circle closest-side, red, blue);
background: -moz-radial-gradient(10% 50%, circle closest-side, red, blue);
background: -o-radial-gradient(10% 50%, circle closest-side, red, blue);
background: radial-gradient(10% 50%, circle closest-side, red, blue);
}
div.two{
width: 400px;
height: 300px;
background:-webkit-radial-gradient(center, red, blue 50%, red 70%);
background: -moz-radial-gradient(center, red, blue 50%, red 70%);
background: -o-radial-gradient(center, red, blue 50%, red 70%);
background: radial-gradient(center, red, blue 50%, red 70%);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
2.6 径向重复渐变
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
div{float:left;overflow: hidden;margin-right: 10px;}
div.one{
width: 400px;
height: 300px;
background:-webkit-repeating-radial-gradient(center, red, blue 20%);
background: -moz-repeating-radial-gradient(center, red, blue 20%);
background: -o-repeating-radial-gradient(center, red, blue 20%);
background: repeating-radial-gradient(center, red, blue 20%);
}
div.two{
width: 400px;
height: 300px;
background:-webkit-repeating-radial-gradient(center, red, blue 10%, red 20%);
background: -moz-repeating-radial-gradient(center, red, blue 10%, red 20%);
background: -o-repeating-radial-gradient(center, red, blue 10%, red 20%);
background: repeating-radial-gradient(center, red, blue 10%, red 20%);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
2.7 使用线性渐变绘制地板砖
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
div{
width: 800px;
height: 500px;
background-color:#abcdef;
background-size: 100px 100px;
background-image: -webkit-linear-gradient(45deg, red 25%, transparent 25%),
-webkit-linear-gradient(-45deg, red 25%, transparent 25%),
-webkit-linear-gradient(45deg, transparent 75%, red 75%),
-webkit-linear-gradient(-45deg, transparent 75%, red 75%);
background-image: -moz-linear-gradient(45deg, red 25%, transparent 25%),
-moz-linear-gradient(-45deg, red 25%, transparent 25%),
-moz-linear-gradient(45deg, transparent 75%, red 75%),
-moz-linear-gradient(-45deg, transparent 75%, red 75%);
background-image: -o-linear-gradient(45deg, red 25%, transparent 25%),
-o-linear-gradient(-45deg, red 25%, transparent 25%),
-o-linear-gradient(45deg, transparent 75%, red 75%),
-o-linear-gradient(-45deg, transparent 75%, red 75%);
background-image: linear-gradient(45deg, red 25%, transparent 25%),
linear-gradient(-45deg, red 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, red 75%),
linear-gradient(-45deg, transparent 75%, red 75%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
