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;
background-size: cover;
background-clip
默认值是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
致我们：
旁观者永远都体会不到指尖在键盘上舞动的感觉，愿我们共同学习，并肩前进！
