CSS 设置背景图片

一、基本设置

使用 CSS 可以通过以下属性设置背景图片:

  1. background-image: 设置背景图片的 URL。
  2. background-size: 设置背景图片的大小。可以设置为绝对像素值,也可以设置为百分比或 "cover"(填充整个容器)或 "contain"(完整显示图片)。
  3. background-repeat: 设置背景图片是否重复。可以设置为 "repeat"(重复)、"no-repeat"(不重复)、"repeat-x"(横向重复)或 "repeat-y"(纵向重复)。
  4. background-position: 设置背景图片的位置。可以设置为绝对像素值,也可以设置为百分比或关键字(如 "center"、"top"、"bottom"、"left" 或 "right")。
  5. 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;
}

通过上面的代码可知,无法完全实现「设置左侧区域背景图片高度填充整个可视区域,图片宽度自适应」。

posted @   飞仔FeiZai  阅读(348)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示