默认平铺 background-imgae:url("image/o.jpg:);
不平铺 background-repeat:no-repeat;
水平重复 background-repeat:repeat-x;
垂直重复 background-repeat:repeat-u;
位置(position) background-position:cneter;
填充 background-image:linear-gradient(30deg green 20% red); 角度(deg)
圆环效果 background-image:radial-gradient();
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Title</title>
<meta name="Keywords" content="关键字">
<meta name="description" content="简介">
<!-- 默认平铺 background-image:url("image/o.jpg");
不平铺 background-repeat:no-repeat
水平重复 background-repeat:repeat-x;
垂直重复 background-repeat:repeat-y;
位置 background-position:center;
填充 background-image:linear-gradient(30deg green 20%,red); 角度(deg);
圆环效果 background-image:radial-gradient()
-->
<style>
@font-face {
font-family: "caoshu";
src: url("fonts/caoshu.TTF");
}
body {
/*默认平铺*/
background-image: url("images/o.jpg");
/*不平铺 background-repeat:no-repeat
水平重复 background-repeat:repeat-x
垂直重复 background-repeat:repeat-y*/
background-repeat: no-repeat;
/*位置(position) background-position:center*/
background-position: center;
}
.box {
background-color: aqua;
width: 500px;
height: 300px;
font: 25px/25px 'caoshu';
color: #f3b4b4;
/*填充 background-image:linear-gradient*/
/*角度 deg*/
/*background-image: linear-gradient(30deg, green 20%, blue, greenyellow, aquamarine, palevioletred);*/
background-image: url("images/k2.png");
background-size: 100% 100%;
}
.ad {
width: 300px;
height: 300px;
/*圆角*/
border-radius: 50%;
border: 1px dashed gray;
/*圆环效果 background-image:radial-gradient()*/
background-image: radial-gradient(aqua, greenyellow, deepskyblue, palevioletred, forestgreen);
}
</style>
</head>
<body>
<div class="ad"></div>
<div class="box">雪中悍刀行</div>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>