老师您好，check pls,thanks a lot
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>background属性</title>
<style type="text/css">
.box{
width: 600px;
height: 300px;
text-align: center;
border: 10px solid rgba(255, 0, 0, 0.5);
padding: 20px;
background: url("http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg") no-repeat rgba(139, 123, 123, 0.5);
background-size:90%;
background-clip: padding-box;
background-position: center 140px;
}
</style>
</head>
<body>
<div class="box">
<h3>慕课网（国内）最大的IT技能学习平台</h3>
</div>
</body>
</html>
正在回答
origin可以理解为定位从哪里开始，单词的意思也是起源、原点，你在浏览器里运行调试数据会直观点，背景图随便找个就行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>背景图像定位background-origin</title>
<style>
div{
width: 500px;
height: 500px;
border: 10px dashed greenyellow;
padding: 30px;
background: url("../img/timg.jpg") 20px 10px/50% no-repeat;
background-origin: padding-box;
}
</style>
<!--
background-origin规定background-position;从什么位置开始定位
background-origin: border-box;从边框开始定位，定位的值覆盖了边框的值，即从边框的最外侧开始算起
background-origin: padding-box;从内边距开始定位，定位的值覆盖了内边距的值，即从内边距的最外侧开始算起
background-origin: content-box;从内容开始定位，定位的值覆盖了内容的值，即从内容的最外侧开始算起
不设定该属性时，默认为background-origin: padding-box;
-->
</head>
<body>
<div></div>
</body>
</html>
覆盖好理解些，之所以说成裁剪，我猜是因为clip单词的翻译。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>背景图像区域background-clip</title>
<style>
*{margin: 0; padding: 0;}
div{
width: 300px;
height: 100px;
border: 20px solid transparent;
padding: 30px;
background:url("../img/timg.jpg");
background-clip: padding-box;/* 此时背景图像覆盖了内边距、内容 */
}
</style>
<!--
background-clip规定背景图像覆盖的区域
background-clip: border-box;覆盖区域：边框、内边距、内容；
background-clip: padding-box;覆盖区域：内边距、内容；
background-clip: content-box;覆盖区域：内容；
不设定该属性时，默认为border-box
-->
</head>
<body>
<div></div>
</body>
</html>
同学你好，关于background-clip与background-origin的区别解答如下：
1、background-clip：规定背景的绘制区域，当背景是纯颜色与图片时，它的显示方式又不一样。它有3种属性：border-box、padding-box、content-box
（1）border-box背景是从边框开始绘制
（2）padding-box背景在边框内部绘制（不包括边框）
（3）content-box背景从内容部分绘制
2、background-origin:规定背景图片的定位区域，注意他的描述是“背景图片”，它只能对背景做样式上的操作，相当于positon，规定图片开始绘制的的区域，也就是它只规定图片的左上角从什么地方开始，其他的它就不管了。
简单的理解就是：background-clip属性规定的是背景图片允许绘制的区域；background-origin属性规定的是背景图片开始绘制的区域。
另外，建议同学遇到问题新建问题提问，不要在一个问答下面追问与本次问答不相关的问题，这样不方便你后期复习的时候查阅哦
如果我的回答帮助了你，希望采纳，祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星