背景设计
CSS3支持rgb、hsl、hex、rgba、hsla
为body元素指定背景图片
<!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>背景图</title>
<style type="text/css">
/*为body指定背景图*/
body{
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181101%2Ff06637dc4adf433b98b8f9423ed366dd.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632066846&t=56e2586f53ce91a455ef58623fe89033");
padding: auto;
}
</style>
</head>
<body>
<section>
<ul>
<h1>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</h1>
</ul>
</section>
</body>
</html>
background-size调整图片的尺寸
background-attenchment设置图片的附着方式
背景位置
backeground-origin
我们来看一下例子：
我们来看一下style样式：
.bg{ width: 100px; height: 100px; padding:50px; border: 10px dashed #000000; background: #ffff00 url('pic1.gif') no-repeat; margin-top: 10px; display: inline-block; } .bg_origin_border{ background-origin: border-box; /*background-position: 10px 10px;*/ } .bg_origin_padding{ background-origin: padding-box; /*background-position: 10px 10px;*/ } .bg_origin_content{ background-origin: content-box; /*background-position: 10px 10px;*/ }下面我们把注释打开，来进一步验证backgroung-origin。
backeground-clip
我们还是直接来看例子：
样式：
.bg_clip_border{ background-clip: border-box; /*background-position: -10px -10px;*/ } .bg_clip_content{ background-clip: content-box; /*background-position: -10px -10px;*/ } .bg_clip_padding{ background-clip: padding-box; /*background-position: -10px -10px;*/ }我们接着把注释去掉：
这就印证了background-clip只是将背景和背景色粗暴的裁剪。
background有关的部分可以全部合写在background里面
参考
转载内容【CSS3】background-origin和background-clip的区别