首页 > web前端 > css教程 > 正文

css怎么让背景图拉伸

醉折花枝作酒筹
发布: 2023-01-07 11:45:44
原创
16257 人浏览过

在css中,可以使用background-size属性让背景图拉伸,只需要给元素设置“background-size:100% 100%;”样式即可。该属性可以以父元素的百分比来设置背景图像的宽度和高度。

css怎么让背景图拉伸

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

background-size 属性规定背景图像的尺寸。

语法

background-size: length|percentage|cover|contain;
登录后复制

HH0QT4TE]V4J)FD7XKX6TXR.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

推荐学习:css视频教程

以上是css怎么让背景图拉伸的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
css
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板