Question

我正在尝试利用新的CSS3功能为我的页面创建一个可以随浏览器窗口缩放的背景。

当我将它直接包含在我的html文档中时，这种风格很好用，但这样做很丑陋并且弄乱了我的工作空间，这是我不想做的事情。

我试图将它包含在我的样式表中，但它只是没有出现。 CSS表的其他元素工作得很好

谁能告诉我自己可能做错了什么？

相关HTML

<!DOCTYPE html>

<html lang="en-US" class="no-js" 
style="background: url(assets/placeholder_one.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-o-background-size: cover; 
 background-size: cover;"
 >
<head class>
    <!-- To be changed ASAP -->
    <title>####</title>
    <link rel="icon" href="assets/logo_1.ico">

    <meta name="author" content="Noah Litov">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="#####">   

    <!-- My styles and bootstrap -->
    <link href="styles/login.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

我的CSS doc（login.css）

.no-js { 
    background: url(assets/placeholder_one.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

Answer 1

写你的CSS

  .no-js { 
background: url(assets/placeholder_one.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}

如果你按照以下方式编写css会更好

body{
     background: url(assets/placeholder_one.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}

Answer 2

可以在您指定的路径中访问check / placeholder_one.jpg。 login.css位于样式目录中，图像位于资产中。尝试将路径更改为../ assets / placeholder_one.jpg。

无法在实际样式表中为html设置样式

2 个答案: