教你一招搞定css背景图的大小
时间：2021-08-26 来源：互联网
今天PHP爱好者给大家带来教你一招搞定css背景图的大小的方法，上一篇文章中我们了解了设置背景图重复的方法，请看《如何使用css设置背景图的重复与否》。这次我们来了解一下设置背景图大小的方法，有需要的可以参考参考。希望对大家有所帮助。
当我们想让我们手中的背景图将整个画面都占住的时候，应该怎么去做呢？
来看一下小栗子吧。
<style>
p{
background-image: url("images/3.jpg");
background-repeat:no-repeat;
background-size: 400px;
}
</style>
</head>
<body><p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
</p>
</body>
这个小例子的结果是
可以看到，当我们在改变某一个属性的值时，这个背景也随着值的改变而变大了。那我们在看看这个属性是什么呢？可以看到我们修改的是background-size这个属性的值。
那我们就来看看这个属性的意思吧。
background-size 属性规定背景图像的尺寸。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
来看看这个属性的语法吧。
background-size: length|percentage|cover|contain;
这个值的解释，我就直接做成一个表格了，可以去看看。
以上就是教你一招搞定css背景图的大小的详细内容，更多请关注php爱好者其它相关文章！
相关阅读更多 +
-
这就是江湖新手必备小技巧-这就是江湖新手入门 2025-04-17 -
群英风华录强度排行如何查看-群英风华录强度排行榜 2025-04-17 -
植物大战僵尸杂交版无尽模式如何搭配最强阵容-植物大战僵尸杂交版无尽模式最强阵容搭配 2025-04-17 -
王者荣耀老夫子皮肤排行-老夫子手感最好的皮肤是哪个 2025-04-17 -
山海镜花平民阵容如何搭配-山海镜花平民玩家阵容搭配 2025-04-17 -
想不想修真灵宝法师的作用是什么-想不想修真灵宝法师有何用处 2025-04-17
最近更新
