技术求助：为何无法在代码中设置背景图片与颜色？

核心错误点 #

• 选择器不匹配：你用了.body类选择器，但HTML中没有对应带body类的元素；.container2同理，HTML里不存在这个元素，导致这两个背景样式完全不生效。应直接用body标签选择器设置页面全局背景。
• background-image属性误用：background-image仅用于指定图片URL，不能将no-repeat、center center、fixed这些参数写在这里。这些属于background复合属性的内容，要么拆分到单独属性（background-repeat、background-position、background-attachment），要么用background简写统一设置。
• 无效HTML标签：HTML里的<p1>是不存在的自定义标签，应替换为标准的<p>标签。
• 重复伪类：.item1:hover:hover多写了一个:hover，正确写法是.item1:hover。

修正后的代码 #

CSS代码 #

body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 用background复合属性统一设置背景样式 */
  background: url("tlostronki.png") no-repeat center center fixed;
  background-size: cover;
}

.container {
  height: 900px;
  width: 600px;
  border-style: solid;
  border-color: burlywood;
  border-radius: 9%;
  margin-top: 65px;
  position: relative;
  padding: 10px;
  background-color: burlywood;
  margin-left: 40%;
  text-align: center;
}

.item1 {
  vertical-align: middle;
  margin-top: 40px;
  border-radius: 7%;
  left: 23%;
  position: relative;
  cursor: pointer;
  border: 1px solid #dfe2e5;
  background: grey;
  width: 320px;
  height: 420px;
  transition: transform 250ms linear 300ms;
}

.item1:hover {
  border-color: rgb(51, 65, 70);
  border: 3px solid;
  color: inherit;
  position: relative;
  transition: all 370ms linear 0ms;
  transform: translateY(-10px);
  width: 320px;
  height: 430px;
  top: -15px;
  box-shadow: 1px 1px 0px, 2px 2px 0px darkgrey, 3px 3px 0px darkgrey, 4px 4px 0px darkgrey, 5px 5px 0px #56542a;
  background: grey;
}

.h1 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin-top: 30px;
  font-size: x-large;
}

.p1 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: large;
}

HTML代码 #

<div class="container">
  <div class="item1"><img src="example photo.png"></div>
  <div class="h1">
    <h1>Semestr 1</h1>
  </div>
  <div class="p1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis,
      turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue
      lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa
      nibh nec erat.</p>
  </div>
</div>

额外说明 #

• 给body添加top:0; left:0; width:100%; height:100%;是确保背景铺满整个视口，避免默认边距或尺寸不足导致背景显示不全。
• 简化了transition的写法，将多个属性合并为一行，提升代码简洁性。

内容的提问来源于stack exchange，提问作者Kpqz Tag