background-size
background-size 取值有：contain | cover | 100px 100px | 50% 100%;
<style type="text/css">
.allen{
background-image:url('./dogge.png') ;
background-repeat:no-repeat;
/*
background-position:left bottom;
background-attachment: fixed;
*/
background-size: contain;
padding-top: 80px;
height: 500px;
width: 600px;
border: 1px solid red;
}
</style>
</head>
<body>
<p class="allen">是谁在偷偷学习呀？注意劳逸结合，保持最佳状态！</p>
</body>
</html>
运行结果：
修改一下上面运行的代码：
background-repeat:no-repeat;
默认值是border-box，语法是：background-clip:border-box|padding-box|content-box;
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 400px;
height: 260px;
background-image: url('cat.png');
/* background-repeat: no-repeat; */
border: 15px dashed salmon;
padding: 2px;
font-size: 60px;
text-align: center;
color: #fff;
}
.box1 {
-webkit-background-clip: border-box;
background-clip: border-box;
}
.box2 {
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-color: aquamarine;
}
.box3 {
-webkit-background-clip: content-box;
background-clip: content-box;
border-color: skyblue;
}
.box4 {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 60px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box box1">hello<br>word1</div>
<div class="box box2">hello<br>word2</div>
<div class="box box3">hello<br>word3</div>
<div class="box box4">hello<br>word4</div>
</body>
</html>
图片的默认根据 background-position: left top; 展示的, 只不过 clip(被裁掉) 了不同的区域。
background-origin
background-origin用来决定background-position的参考原点，即背景图片定位的起点。取值有content-box,padding-box,padding-box三种
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 400px;
height: 260px;
background-image: url('cat.png');
/* background-repeat: no-repeat; */
border: 15px dashed salmon;
padding: 2px;
font-size: 60px;
text-align: center;
color: #fff;
}
.box1 {
background-origin: border-box;
}
.box2 {
background-origin: padding-box;
}
.box3{
background-origin: content-box;
}
</style>
</head>
<body>
<div class="box box1">hello<br>word1</div>
<div class="box box2">hello<br>word2</div>
<div class="box box3">hello<br>word3</div>
</body>
</html>
以上就是CSS中图片背景的介绍了，如有不足指出，希望各位博主指正，万分感谢！
练练手叭~
牛客网
https://www.nowcoder.com/exam/oj?page=1&tab=HTML/CSS&topicId=260&fromPut=pc_csdncpt_wlxfd_qianduan
致我们：
旁观者永远都体会不到指尖在键盘上舞动的感觉，愿我们共同学习，并肩前进！
