用CSS把背景图片拉伸

最新推荐文章于 2025-05-29 15:24:27 发布

richardxxg

最新推荐文章于 2025-05-29 15:24:27 发布

阅读量1.7w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML/CSS 文章标签： css CSS

本文链接：https://blog.youkuaiyun.com/richardxxg/article/details/8210508

HTML/CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS将背景图片进行拉伸填充。重点在于理解CSS中的`repeat`属性，该属性允许在原始图片基础上进行重复，但无法像桌面那样放大填充。示例代码展示了在ASP.NET中应用这一技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

body{background:url(图片) repeat}

背景{}中添加background: url(图片地址)repeat
详细讲解：
repeat 背景图像在纵向和横向上平铺
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向平铺

repeat:3/*重复3次*/
注意:只能在原图的基础上进行重复！而不能像我们的桌面一样进行扩大填充。

代码如下:
默认代码为：

body{background-color:#FFFFFF}

换成以下代码

body{background:url(背景图片地址) background-position: center;background-attachment: fixed;repeat-x #FFFFFF}

这是全屏的背景代码~

在ASP.NET中把背景图片拉伸

body 
{ 
background-image:url('a.jpg'); 
background-repeat:repeat 
}
body{background:#FFF url(背景图片地址) no-repeat 50% 0;} 
   no-repeat不重复 
   50% 0(水平位置 垂直位置) 水平50%既居中,垂直0px 
   center 也可
DIV+CSS如何让图片文字混排的情况下垂直居中
<style>
div{padding:40px 0px 40px 0px;border:1px solid #ccc;}
</style>

<div>

测试一下

</div>