CSS 设置背景图片
一、基本设置
使用 CSS 可以通过以下属性设置背景图片:
background-image
: 设置背景图片的 URL。background-size
: 设置背景图片的大小。可以设置为绝对像素值,也可以设置为百分比或 "cover"(填充整个容器)或 "contain"(完整显示图片)。background-repeat
: 设置背景图片是否重复。可以设置为 "repeat"(重复)、"no-repeat"(不重复)、"repeat-x"(横向重复)或 "repeat-y"(纵向重复)。background-position
: 设置背景图片的位置。可以设置为绝对像素值,也可以设置为百分比或关键字(如 "center"、"top"、"bottom"、"left" 或 "right")。background-attachment
:设置背景图片的滚动方式,可以是 scroll(随元素滚动)或 fixed(固定,不随元素滚动)。
例如:
.bg-img { background-image: url("bg.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
二、具体场景设置
1、设置左侧区域背景图片高度填充整个可视区域,图片宽度自适应
<div class="container"> <div class="left"></div> <div class="right"></div> </div>
.container { width: 100vw; height: 100vh; background: #fff; display: flex; } .left { height: 100vh; width: 40vw; background: url("bg.jpg") no-repeat left; /* 当使用该设置时(方法一),当可视高度不变时,可视宽度变化时,背景图片的高度也会自适应变化 */ background-size: contain; /* 当使用该设置时(方法二),当可视高度不变时,可视宽度变化时,背景图片的宽高不会变化,但在该场景下,背景图片右侧会被遮挡 */ background-size: auto 100%; } .right { height: 100vh; width: 60vw; }
通过上面的代码可知,无法完全实现「设置左侧区域背景图片高度填充整个可视区域,图片宽度自适应」。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期