个人作品集网站背景图片无法显示的技术求助

问题根源及修复方案 #

• 选择器匹配错误
  你写的header.image是指同时拥有image类的<header>标签，但实际HTML结构是<header>内部的<div>带有image类，所以需要改用后代选择器header .image（注意header和.image之间的空格）。

• 元素完全透明
  CSS里给.image设置了opacity: 0，这会让整个元素包括背景图彻底不可见，直接删除这个属性或者改为opacity: 1即可。

修正后的代码 #

CSS代码

header {
  height: 46rem;
}

header .image {
  background-image: url('https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w300/2023/09/instagram-image-size.jpg');
  background-size: cover;
  background-position: center;
  height: 46rem;
  width: 100%;
}

HTML代码（无需修改）

<header>
  <div class="image"></div>
  <div class="content">
    <h1>Kerimcan Uğurlu @kerimcan.ugurlu</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <a href="#" class="btn">Read More</a>
  </div>
</header>

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