css3 图充满容器

CSS3中的background-size属性可以用于控制背景图片的尺寸，让背景图充满容器，并且可以对图片进行等比缩放。

.Box {
  background-image: url('background.jpg');
  background-size: cover; /* 利用cover值充满容器 */
}

css3 图充满容器

如果希望背景图片始终保持原始的宽高比例，并在容器内居中显示（如果容器比图片大），可以使用background-position属性。

.Box {
  background-image: url('background.jpg');
  background-size: contain; /* 利用contain值等比缩放 */
  background-position: center center; /* 居中显示 */
}

还可以使用多重背景来实现在容器内添加多张背景图片，每张图片可以使用不同的缩放比例和位置。

.Box {
  background-image:
    url('background1.jpg'),/* 第一张背景图 */
    url('background2.jpg'); /* 第二张背景图 */
  background-size:
    contain,/* 第一张背景图等比缩放 */
    cover; /* 第二张背景图充满容器 */
  background-position:
    center center,/* 第一张背景图居中显示 */
    top right; /* 第二张背景图右上角显示 */
}

在CSS3中，还有许多其他有趣的背景属性，例如：background-clip、background-origin、background-repeat等，可以为背景添加更多的样式。

css3 图充满容器

相关文章