Question

我有以下CSS代码，我需要显示页面的背景图像，但是没有任何效果。我确保我正确地访问了路径，所以这不是问题。我的CSS代码可能存在缺陷吗？对不起，Stack Overflow一直在说我的问题代码太多，细节更少，但是我已经描述了我的问题。因此，我只是在键入内容，以便可以发布可能的问题并获得反馈。

我的代码如下：

*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}

body{
font-family: 'Raleway', sans-serif;
}

.background{
background: url("./assets/img/rooms/room3.jpg") no-repeat;
background-size: cover;
height: 100vh;
display: flex;
}

.text, .box{
margin-top: 45vh;
flex: 1;
}

.text{
margin-left: 10%;
font-weight: 300px;
}

.box{
margin-left: 25%;
}

.text h1{
font-size: 70px;
font-weight: 500;
color: purple;
}

.text p{
color: purple;
font-size: 20px;
font-weight: 300;
}

.text p a{
font-weight: 700;
color: orange;
}

.form{
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 250px;
}

input{
margin: 20px 0;
padding: 10px;
border: none;
outline: none;
color: grey;
font-family: 'Raleway', sans-serif;
}

.username, .password{
border-bottom: 1px solid #fff;
}

.button{
border: 1px solid purple;
color: purple;
font-size: 18px;
}

.button:hover{
background: white;
color: #;
}

示例HTML：

div class="background">
<div class="text">
<h1>Login</h1>
 <p>No Account? <a href="signup.html">Click Here To Sign up</a></p>
        </div>
        <div class="box">
            <form class="form">
                <input type="text" class="username"      placeholder="Username" required>
                <input type="password" class="password" placeholder="Password" required>
                <input type="submit" class="button" value="Login">
            </form>
        </div>
    </div>

Answer 1

如果这是您要引用的图像，您可能忘记了为.background放置类。也有一些错误。尝试：

.background{
    background: url("http://www.birds.com/wp-content/uploads/home/bird4.jpg") no-repeat;
    background-size: cover;
    height: 100vh;
    display: flex;
}

并将背景类添加到某物：

<body class="background">

为什么我的背景图片不显示

1 个答案: