CSS 设置背景图片-Toy模板网

这篇具有很好参考价值的文章主要介绍了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"）。

例如：

.bg-img {
  background-image: url("bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

二、具体场景设置

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;
}

通过上面的代码可知，无法完全实现「设置左侧区域背景图片高度填充整个可视区域，图片宽度自适应」。文章来源地址https://www.toymoban.com/news/detail-522052.html

到了这里，关于CSS 设置背景图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！