Question

我正在尝试使用background-size: cover和background-size: contain将背景图像居中到div，但它不起作用。我需要在HTML标签内显示背景图像，并在css文件中使用background-size，这是代码：

.container {
    width: 200px;
    height: 260px;
    position: relative;
    margin: 0 auto 40px;
    margin-left: 20px;
    display: inline-block;
}
.main{
    border: 1px solid black;
    background-color: #A6A6A6;
}
.card {
    width: 100%;
    height: 100%;
    position: absolute;
    border: 2px solid white;
}
.card div {
    height: 100%;
    width: 100%;
    color: white;
    text-align: center;
    position: absolute;
}
.card .front {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
}

<body style="background-image:url(https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg);">
<div class="main">
  <section class="container">
      <div class="card">
          <div class="front" style="background-image: url('http://www.mobygames.com/images/covers/l/403626-injustice-2-playstation-4-front-cover.png');">
          </div>
          <div class="back">1</div>
      </div>
  </section>
  <section class="container">
      <div class="card">
          <div class="front" style="background-image: url('http://www.mobygames.com/images/covers/l/403651-the-surge-playstation-4-front-cover.jpg');">
          </div>
          <div class="back">2</div>
      </div>
  </section>
</div>
          
</body>

Answer 1

您的.card .front样式为background-repeat，但您提供的属性太多了。

center center需要提供background-position

.card .front {
     background-position: center center;
     background-repeat: no-repeat; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
 }

使用CSS和大多数其他维度，你使用X然后是Y然后是Z（除了Z-index之外没有Z）

背景大小会放大图像，直到整个div都已满。

您正在寻找的是background-size: contain。这将在任何容器中显示完整图像。然后添加center center

.card .front {
    background-image: url(https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
 }

Answer 2

这是一个简单的修复，您需要指定background-position: center;。这将确保您的背景图像居中。

.card .front {
    background-position: center;
｝

Answer 3

我不确定我是否理解你，但你有没有尝试过背景：50％; ？

.container {
    width: 200px;
    height: 260px;
    position: relative;
    margin: 0 auto 40px;
    margin-left: 20px;
    display: inline-block;
}
.main{
    border: 1px solid black;
    background-color: #A6A6A6;
}
.card {
    width: 100%;
    height: 100%;
    position: absolute;
}
.card div {
    height: 100%;
    width: 100%;
    color: white;
    text-align: center;
    position: absolute;
}
.card .front {
    background-repeat: no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: 50%;
}

<body style="background-image:url(https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg);">
<div class="main">
  <section class="container">
      <div class="card">
          <div class="front" style="background-image: url('http://www.mobygames.com/images/covers/l/403626-injustice-2-playstation-4-front-cover.png');">
          </div>
          <div class="back">1</div>
      </div>
  </section>
  <section class="container">
      <div class="card">
          <div class="front" style="background-image: url('http://www.mobygames.com/images/covers/l/403651-the-surge-playstation-4-front-cover.jpg');">
          </div>
          <div class="back">2</div>
      </div>
  </section>
</div>
          
</body>

背景大小的盖子/中心不起作用

3 个答案: