无法将任何图像用作CSS中的背景图像

问题描述

我正在尝试在CSS文件中添加图像以作为本地文件的背景。我已经尝试了所有内容，从../img/img1.jpeg到img1.jpeg等。我什至尝试添加本教程正在使用的网站URL，但仍无法正常工作。到目前为止，这就是我的工作。

以下是CSS和HTML：

import { useCallback,useState } from "react";

// Throttles all callbacks on a component within the same throttle.  
// All callbacks passed in will share the same throttle.

const THRottLE_DURATION = 500;

export default (callbacks: Array<() => any>) => {
    const [isWaiting,setIsWaiting] = useState(false);

    const throttledCallbacks = callbacks.map((callback) => {
        return useCallback(() => {
            if (!isWaiting) {
                callback()
                setIsWaiting(true)
                setTimeout(() => {
                    setIsWaiting(false)
                },THRottLE_DURATION);
            }
        },[isWaiting]);
    })

    return throttledCallbacks;
}

  .intro {
  height: 100%;
  width: 100%;
  margin: auto;
  background: url("../img/Stone Wall Witch Hut Watermarked.jpeg") no-repeat 50% 50%;

本教程中使用的URL为：https://static.pexels.com/photos/248159/pexels-photo-248159.jpeg

我要使用的图像位于名为img的文件夹中。父文件夹称为摄影入门文件。 img文件夹，HTML和CSS都在其中。无论我在后台放置什么，我都无法显示任何内容。

解决方法

如 blurfus 在评论中所述，您的HTML错误。开头的<section>标签拼写错误为<secion>。您的代码段中的CSS也没有关闭}。

有关有效版本，请参见下面的代码段。你很亲密！请注意，我使用了直接Web链接到您的照片，因此它可以在摘要中使用。

.intro {
    height: 100%;
    width: 100%;
    margin: auto;
    background: url("https://static.pexels.com/photos/248159/pexels-photo-248159.jpeg") no-repeat 50% 50%;
}

<section class="intro">
    <nav>
        <a href="#" id="menu-icon"></a>
        <ul>
            <li><a href="#about">About Me</a></li>
            <li><a href="#port">Portfolio</a></li>
            <li><a href="#serv">Services</a></li>
            <li><a href="#contact">Contact Me</a></li>
        </ul>
    </nav>
    <div ckass="inner">
        <div class="content">
            <h1>Photography</h1>
            <p>my pictures</p>
        </div>
    </div>
</section>

,

我可以发现两个可能导致此错误的错误。

1. .intro文件中的css标签缺少右花括号
2. section文件中的html标记拼写错误

否则，似乎工作正常。 Recreated your example