背景图

最新推荐文章于 2024-04-16 16:16:10 发布

IChenSY

最新推荐文章于 2024-04-16 16:16:10 发布

阅读量162

点赞数 1

文章标签： html css

本文链接：https://blog.youkuaiyun.com/iYNing/article/details/109825357

版权

本文主要介绍了HTML和CSS中背景图的相关知识。阐述了背景图默认平铺、不占位置、显示范围由盒子大小决定等特点，还介绍了控制背景图平铺方式的background - repeat属性、设置背景图位置的background - position属性，以及控制背景图固定或滚动的background - attachment属性。

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

背景图的特点:
1.背景图默认是平铺的
2.背景图不占位置
3.背景图的显示范围由盒子大小来决定的
盒子大小=背景图大小,将会看到一张完整的背景图
盒子大小>背景图大小,将会看到很多张背景图
想要看到一张背景图,需要background-repeat属性
background-repeat:no-repeat;
background-repeat:repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
盒子大小<背景图大小,将会看到一部分的背景图

背景图的位置:background-position属性(水平垂直)
水平:
background-position:left;
background-position:right;
background-position:center;
垂直:
background-position:top;
background-position:bottom;
background-position:center;
简写:
background-position:center center;

		属性值用数字+单位(px或%)数字可以给负数
		background-position:0px-100px;盒子像素-图片像素
		background-position:0%-100%;(盒子一半-图片一半)/2

背景图固定/滚动：
background-attachment: scroll; 滚动
background-attachment: fixed; 固定
固定之后,是固定在浏览器窗口,所以在移动位置的时候,参照物就找浏览器窗口了,但可见范围还是盒子的范围