代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
background:url("/uploads/allimg/20221223/1-221223161543561.png");
background-size:80px 160px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>
<p>原始图片: <img src="/uploads/allimg/20221223/1-221223161543561.png" alt="Flowers" width="224" height="162"></p>
</body>
</html> 尝试一下 »
点击“尝试一下”按钮查看在线实例
标签定义及使用说明
background-size属性指定背景图片大小。
语法
background-size: length|percentage|cover|contain;
| 值 | 描述 |
|---|---|
| length | 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" |
| percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" |
| cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
| contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
