无法设置背景图像

Question

这是我的HTML代码：

＆＃13;

＆＃13;

.home {
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url(https://unsplash.com/photos/cpLsWmMEa1Q);
  background-size: cover;
  background-position: center center;
}

＆＃13;

<div class="overlay-navigation">
    <nav role="navigation">
        <ul>
            <li><a href="#" data-content="The beginning">Home</a></li>
            <li><a href="#" data-content="Curious?">About</a></li>
            <li><a href="#" data-content="I got game">Skills</a></li>
            <li><a href="#" data-content="Only the finest">Works</a></li>
            <li><a href="#" data-content="Don't hesitate">Contact</a></li>
        </ul>
    </nav>
</div>

<section class="home">
    <div class="open-overlay">
        <span class="bar-top"></span>
        <span class="bar-middle"></span>
        <span class="bar-bottom"></span>
    </div>
</section>

＆＃13;

＆＃13;

＆＃13;

我想用这个更改背景图片： https://unsplash.com/photos/cpLsWmMEa1Q

但它不接受它!!!

Answer 1

实际图片路径为https://images.unsplash.com/photo-1509395062183-67c5ad6faff9?auto=format&fit=crop&w=2000&q=80

.home {
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url(https://images.unsplash.com/photo-1509395062183-67c5ad6faff9?auto=format&fit=crop&w=500&q=80);
  background-size: cover;
  background-position: center center;
}

<div class="overlay-navigation">
    <nav role="navigation">
        <ul>
            <li><a href="#" data-content="The beginning">Home</a></li>
            <li><a href="#" data-content="Curious?">About</a></li>
            <li><a href="#" data-content="I got game">Skills</a></li>
            <li><a href="#" data-content="Only the finest">Works</a></li>
            <li><a href="#" data-content="Don't hesitate">Contact</a></li>
        </ul>
    </nav>
</div>

<section class="home">
    <div class="open-overlay">
        <span class="bar-top"></span>
        <span class="bar-middle"></span>
        <span class="bar-bottom"></span>
    </div>
</section>

Answer 2

请提供特定的图片路径链接

将您的链接更改为https://images.unsplash.com/photo-1509395062183-67c5ad6faff9?auto=format&fit=crop&w=500&q=80

.home {
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url(https://images.unsplash.com/photo-1509395062183-67c5ad6faff9?auto=format&fit=crop&w=500&q=80);
  background-size: cover;
  background-position: center center;
}

<div class="overlay-navigation">
    <nav role="navigation">
        <ul>
            <li><a href="#" data-content="The beginning">Home</a></li>
            <li><a href="#" data-content="Curious?">About</a></li>
            <li><a href="#" data-content="I got game">Skills</a></li>
            <li><a href="#" data-content="Only the finest">Works</a></li>
            <li><a href="#" data-content="Don't hesitate">Contact</a></li>
        </ul>
    </nav>
</div>

<section class="home">
    <div class="open-overlay">
        <span class="bar-top"></span>
        <span class="bar-middle"></span>
        <span class="bar-bottom"></span>
    </div>
</section>

Answer 3

最好将照片保存在本地文件夹中

background-image: url('./assets/images/photo-001.jpg');