时间戳

首页 > 解决方案 > 当我们最小化或最大化图像无法更改的站点时，在css中设置静态背景图像大小？

css - 当我们最小化或最大化图像无法更改的站点时，在css中设置静态背景图像大小？

问题描述

.image {
    background-image: url('task pic 1.jpeg'), url('task pic 2.jpeg'), url('task pic 3.jpeg');
    background-position: left bottom, left top, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    margin-top: 50px;
    margin-right: -200px;
    margin-left: 800px;
    padding: 300px;
    border: 100%;
    width: auto;
    background-size: auto;
    position: relative;
}

截屏

标签： css

解决方案

您可以使用以下方法设置静态宽度/高度background-size：

body {
  margin: 0;
}

.image {
  background-image: url('https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpeg'), url('https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpeg'), url('https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpeg');
  background-position: 0 0, 0 200px, 100px 100px;
  background-repeat: no-repeat;
  background-size: 300px;
  width: 500px;
  height: 500px;
  position: relative;
}
<div class="image"></div>

推荐阅读