我对 CSS 中的背景图像有疑问

Question

我对 CSS 中的背景图像有疑问。我想设计一个盒子，除了 1 link 和按钮外，所有部分都显示为背景图像。我一行需要 3 个这样的盒子。我附上了示例图片。想不通问题，求指导

body {
  background: #F2F2F2;
  padding: 0px;
}

#price {
  text-align: center;
  align-items: center;
  background-image: url(https://carevisa.at/wp-content/uploads/2020/09/2.jpg);
  background-repeat: no-repeat;
  background-position: center;
}

#price::after{
    content: "";
    display: table;
    clear: both;
}

.plan {
  display: flex;
  margin: 10px 2%;
  font-family: 'Lato', Arial, sans-serif;
  width: 477px;
  height: 832px;

}

.btn {
  position: absolute;
  padding: 1em;
  padding-bottom: 2em;
  text-align: center;

}

.btn a {
  background: red;
  padding: 10px 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
}

.IMGbox{
  width: 477px;
  height: 832px;
}
.Readmore{
  position: absolute;
  text-align: center;
  width: 100px;
}

<div id="price">
  <!--price tab-->
  <div class="plan">
      <a href="http://carevisa.at/readmore/" class="Readmore">More details</a>

    <div class="btn">
      <a href="#">Online application</a>
    </div>
  </div>
</div>

Answer 1

试试这个，

使用绝对定位计划 class。即，

.plan {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

并将宽度和高度提供给 price id 而不是 plan class.

#price {
  position:relative;
  width: 477px;
  height: 832px;
  display: inline-block;
}

Codepen Demo

body {
  background: #F2F2F2;
  padding: 0px;
}

#price {
  position:relative;
  background-image: url(https://carevisa.at/wp-content/uploads/2020/09/2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  width: 477px;
  height: 832px;
  display: inline-block;
}

#price::after{
  content: "";
  display: table;
  clear: both;
}

.plan {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  margin: 10px 2%;
  font-family: 'Lato', Arial, sans-serif;
}

.btn {
  padding: 1em;
  padding-bottom: 2em;
  text-align: center;
}

.btn a {
  background: red;
  padding: 10px 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
}

.IMGbox{
  width: 477px;
  height: 832px;
}
.Readmore{
  text-align: center;
  width: 100%;
  display: block;
  margin-bottom: 25px;
}

<div id="price">
  <!--price tab-->
  <div class="plan">
      <a href="http://carevisa.at/readmore/" class="Readmore">More details</a>

    <div class="btn">
      <a href="#">Online application</a>
    </div>
  </div>
</div>

<div id="price">
  <!--price tab-->
  <div class="plan">
      <a href="http://carevisa.at/readmore/" class="Readmore">More details</a>

    <div class="btn">
      <a href="#">Online application</a>
    </div>
  </div>
</div>

<div id="price">
  <!--price tab-->
  <div class="plan">
      <a href="http://carevisa.at/readmore/" class="Readmore">More details</a>

    <div class="btn">
      <a href="#">Online application</a>
    </div>
  </div>
</div>

我对 CSS 中的背景图像有疑问

I have a question about background-image in CSS

html

css

background-image