我看不到添加到我的作品集网站中的照片

Question

我正在尝试使用 HTML 和 CSS 创建我自己的作品集网站。首先，我想展示我在索引中做了什么。

\n

\r\n

\r\n

header {\n  height: 46rem;\n}\n\nheader.image {\n  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\');\n  background-size: cover;\n  background-position: center;\n  height: 46rem;\n  width: 100%;\n  opacity: 0;\n}

\r\n

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

\r\n

\r\n

\r\n

\n

正如你从我写的内容中看到的，我认为我做的一切都是正确的，但是我添加的照片没有显示为背景。事实上，我添加的照片根本没有出现。

\n

Answer 1

header .image { ... }1.) 选择器之间需要有一个空格，以表明它.image是 的后代 元素header。（如果没有这个空间，它只会选择header一个本身具有.image类的元素）

\n

2.)opacity: 0将使元素完全透明=不可见，因此将其更改为另一个值...

\n

\r\n

\r\n

header {\n  height: 46rem;\n}\n\nheader .image {\n  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\');\n  background-size: cover;\n  background-position: center;\n  height: 46rem;\n  width: 100%;\n  opacity: 0.5;\n}

\r\n

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

\r\n

\r\n

\r\n

\n

但我想您希望将该图像作为整个header元素的背景，因此您不应该div为它使用单独的背景，而是将其定义为background-image本身header（或者可能是header h1？）：

\n

\r\n

\r\n

header {\n  height: 46rem;\n  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\');\n  background-size: cover;\n  background-position: center;\n  width: 100%;\n}

\r\n

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

\r\n

\r\n

\r\n

\n