Rumah > Artikel > hujung hadapan web > css怎么让背景图拉伸
css怎么让背景图拉伸
- 醉折花枝作酒筹asal
- 2021-07-26 15:29:5416207semak imbas
在css中，可以使用background-size属性让背景图拉伸，只需要给元素设置“background-size:100% 100%;”样式即可。该属性可以以父元素的百分比来设置背景图像的宽度和高度。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
background-size 属性规定背景图像的尺寸。
语法
background-size: length|percentage|cover|contain;
![HH0QT4TE]V4J)FD7XKX6TXR.png](https://img.php.cn/upload/image/822/982/702/1627284347762379.png "1627284347762379.png")
实例：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background:url(/i/bg_flower.gif);
background-size:35% 100%;
-moz-background-size:35% 100%; /* 老版本的 Firefox */
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</div>
</body>
</html>效果
![(XY0]S2]9{JI4N)U3OZWIZB.png](https://img.php.cn/upload/image/402/619/877/1627284539241176.png "1627284539241176.png")
推荐学习：css视频教程
Atas ialah kandungan terperinci css怎么让背景图拉伸. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css中:not用法是什么Artikel seterusnya：利用CSS如何实现全兼容的毛玻璃效果？（代码详解）