提问者:小点点

背景:url(local.png)为什么不工作


我的问题是,背景属性只适用于在线存储的图像。当我试图显示本地存储的图像时,它不工作。

我的文件夹结构:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./src/css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"> 
    <title>Document</title>
</head>
<body>
    <div class="profile-card">
        <div class="card-header">
            <div class="pic">
                <img src="./src/images/profilepicture.png" alt="">
            </div>
            <div class="name">###</div>
            <div class="desc">Front-End Developer</div>
            <div class="sm">
                <a href="#" class="fa fa-instagram"></a>
                <a href="#" class="fa fa-twitter"></a>
                <a href="#" class="fa fa-github"></a>
                <a href="#" class="fa fa-linkedin"></a>
            </div>
            <a href="#" class="contact-btn">Contact Me</a>
        </div>
        <div class="card-footer">
            <div class="numbers">
                <div class="item">
                    <span>120</span>
                    Posts
                </div>
                <div class="item">
                    <span>127</span>
                    Following
                </div>
                <div class="item">
                    <span>120k</span>
                    Followers
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    height: 100vh;
    background: url(./src/images/background.png) no-repeat center;
    background-size: cover;
}

共2个答案

匿名用户

您必须设置相对于您的CSS文件的路径,或者从root设置绝对路径。

../images/background.png

/src/images/background.png

您的代码试图在中搜索不存在的图像。

匿名用户

使用相对路径,您必须将路径更新到

url(../images/background.png)

因为从css文件中,您必须在下一个目录,然后进入images文件夹。