CSS 设置背景图片

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

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”)。

例如:

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

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

今天的文章CSS 设置背景图片分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/76117.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注