Question

我正在开发当前带有蓝色横幅的Web UI。但是，当我尝试在下面的CSS块中修改其大小时，它不会更新。之前，在下面的代码中，background-size设置为cover，但是我需要缩小横幅的高度。

#header {
      background-color: #04f;
      color: rgba(255, 255, 255, 0.75);
      display: -moz-flex;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -moz-align-items: center;
      -webkit-align-items: center;
      -ms-align-items: center;
      align-items: center;
      -moz-justify-content: center;
      -webkit-justify-content: center;
      -ms-justify-content: center;
      justify-content: center;
      -moz-flex-direction: column;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 8em 0 6em 0;
      background-size: 20px 20px;
      background-position: center top;
      background-attachment: fixed;
      text-align: center;
      position: relative;
      cursor: default;
 }

<!DOCTYPE HTML>
<html>
<head>
<title>Author Script by SANDERS</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="static/main.css?version=1" />
</head>
<body>

<!-- Header -->
<header id="header" class="alt">
<div class="inner">
 <h1>Sanders Author Script</h1>
 <p>A free author formatting script by Stephan J. Sanders</p>
</div>
</header>
</body>
</html>

Answer 1

您可以将height属性添加到CSS ID。

#header {
  background-color: #04f;
  height : 500px;
  width : 100%;

}

更新CSS文件时背景大小未更新

1 个答案: