Question

我想为第一部分创建一个背景图像，为其下的每个部分创建一个不同的背景图像，我该怎么做？

＆＃13;

 * {
  box-sizing: border-box;
}

body {
  margin: 0;
}

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #fff;
  height: 100vh;
}
section:nth-of-type(2n) {
	background-color: #d3d3d3;
}

.intro {
  height: 100vh;
}

＆＃13;

<body>

<section class="intro">  
  
</section>

<section>  
  
</section>

<section>  
  
</section>

<section>  
  
</section>

</body>

＆＃13;

非常感谢使用占位符图像的代码示例

Answer 1

＆＃13;

.intro{
  width: 250px;
  height: 250px;
  background-color: red;
}

section{
  width: 250px;
  height: 250px;
  border: 2px solid red;
}

section:nth-child(2){
   width: 250px;
  height: 250px;
  background: url('place url here');
}

section:nth-child(3){
   width: 250px;
  height: 250px;
  background: url('place url here');
}

＆＃13;

<section class="intro">  

</section>

<section>  

</section>

<section>  

</section>

＆＃13;

您可以将网址放入各个部分的第n个子节点中。

每节背景

1 个答案: