0

我的页面标题结构为

<header>
        <div class="clouds"></div>
</header>

云不会因屏幕宽度的变化而变化。我想让他们响应。我该如何处理 CSS。

我目前使用以下 CSS 代码。

header{
    width:100%;
    height:100%;
}

.clouds{
    z-index: -98;
    position: absolute;
    top:0px;
    left: 0px;
    width:100%;
    background: url('../images/clouds.png') repeat-x;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100% !important;
    height: 30%;
    min-width: 960px;
}
4

5 回答 5

1

您不应该添加高度和宽度，这应该至少做到这一点

background: url('../images/clouds.png')
background-repeat:no-repeat;
background-size:contain;
background-position:center;
于 2013-10-04T11:24:21.693 回答
0

使用 CSS 媒体查询来做到这一点。

http://css-tricks.com/css-media-queries/

于 2013-10-04T11:21:19.427 回答
0

这是响应性的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100%;
        border: 1px solid #555;
        font: 14px Arial;
      background-color:red;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: left;


        display: box;
        box-orient: horizontal;
      }



      .box > div:nth-child(1){ background : #FCC;  -webkit-box-flex: 10;
}
      .box > div:nth-child(2){ background : #CFC;   -webkit-box-flex: 20;
}
      .box > div:nth-child(3){ background : #CCF;   -webkit-box-flex: 30;
}

      .box > div:hover { 
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="box">

      <div>HTML5</div>
      <div>CSS3</div>
      <div>Javascript API for HTML5</div>
    </div>
  </body>
</html>

演示：http: //jsfiddle.net/TLnC3/

于 2013-10-04T11:24:48.060 回答
0

您的代码对我来说工作正常。尽管您有一些错误的代码。

你不必

header{
    width:100%;
    height:100%;
}

如果你要让你的 .cloud 100% 宽度，并且高度不是必需的。

也许您认为由于最小宽度而无法正常工作。这限制了您的 .clouds 最小宽度。因此，如果您将其重新调整为低于您的最小宽度。您的 .clouds 宽度不会更改为您的屏幕尺寸。

并且不要听其他使用媒体查询的人，对于这种基本的响应能力，您不必使用媒体查询。

于 2013-10-04T11:32:36.953 回答
0 
header{
    width:100%;
    height:100%;
}

.clouds{
    z-index: 98;
    position: absolute;
    top:0px;
    left: 0px;
    width:100%;
    background: url('../images/clouds.png') repeat-x;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100% !important;
    height: 30%;    
}
于 2013-10-04T11:39:30.803 回答