如何使用 css 将相同的背景图像单独放入多个 <div> 元素中？

Question

我是网络开发领域的新手。我正在从互联网免费资源和课程中学习，所以没有人可以解决我的细微问题。我的任务是使用 HTML 和 CSS 安排卡片组

所以，我写 HTML 一样。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>My First page</title>
</head>

<body>

  <div class="card">
    <div class="card2"></div>
    <div class="card3"></div>
    <div class="card4"></div>
  </div>

</body>

</html>

现在在 .css 文件中，我想给所有孩子放一张卡片图像

<div>

并想调整图像的大小。我怎样才能做到这一点？我在下面尝试了这个 CSS。

.card {
  width: 200px;
  height: 280px;
  background-image: url(https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png);
  background-size: 200px 280px;
  position: relative;
  z-index: 1;
}

.card2 {
  background-image: url(https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png);
  background-size: 200px 280px;
  position: absolute;
  top: 60pxpx;
  left: 50px;
  z-index: 2;
}

.card3 {
  background-image: url(https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png);
  width: 200px height:280px;
  position: absolute;
  top: 100px;
  left: 80px;
  z-index: 3;
}

.card4 {
  background-image: url(https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png);
  width: 200px height:280px;
  position: absolute;
  top: 150px;
  left: 150px;
  z-index: 4;
}

Answer 1

您的代码中有多个拼写错误：

top: 60pxpx;

  width: 200px  // your are missing the ';' character
  height:280px;

   <div class="card">
        <div class="card2"></div>
        <div class="card3"></div>
        <div class="card4"></div>
    </div>

我认为你不想这样，也许你只是忘记及时关闭第一个div，多注意这种错误。

然后回答你的问题

 .card{

   position: relative;
   z-index: 1;
  
  }
  .card2{

    position: absolute;
    top: 60px;
    left: 50px;
    z-index: 2;
  }
  .card3{

    position: absolute;
    top: 100px;
    left: 80px;
    z-index:3;
  }
  .card4{

    position: absolute;
    top: 150px;
    left: 150px;
    z-index: 4;
  }

  div{
    background-image: url(https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png);
    width: 200px;
    height:280px;
    background-size:200px 280px;
  }

 <div class="card"></div>
 <div class="card2"></div>
 <div class="card3"></div>
 <div class="card4"></div>

Answer 2

这是使用位置属性和 CSS 变量实现此目的的排序方法。

.card {
            width: 200px;
            height: 500px;
            background-image: url('https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png');
            background-size: contain;
            position: absolute;
            background-repeat: no-repeat;
            top: var(--top);
            left: var(--left);
        }

<div class="card" style="--top: 50px; --left: 50px"></div>
    <div class="card" style="--top: 100px; --left: 100px"></div>
    <div class="card" style="--top: 150px; --left: 150px"></div>
    <div class="card" style="--top: 200px; --left: 200px"></div>

如何使用 css 将相同的背景图像单独放入多个 <div> 元素中？

问题描述投票：0回答：2

2个回答

最新问题

如何使用 css 将相同的背景图像单独放入多个 <div> 元素中？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2