我们怎样才能使头

的响应高度我有我的网页标题结构我们怎样才能使头

<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; 
}

来源

2013-10-04 Programmer

你不应该添加的高度和宽度，这应该在最低限度

background: url('../images/clouds.png') 
background-repeat:no-repeat; 
background-size:contain; 
background-position:center;

来源

2013-10-04 11:24:21

谢谢，我用background-size：包含宽度和高度，它工作。 – Programmer

使用CSS媒体查询来执行此操作。

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

来源

2013-10-04 11:21:19 Jonathon

这里做的是为响应示例代码：

<!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-04 11:24:48

你的代码对我来说工作正常。虽然你有一些不好的代码。

你不必

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

如果您打算让您的.cloud 100％的宽度，高度是没有必要的。

也许你认为它没有工作，因为最小宽度。这限制了您的.clouds最小宽度。所以如果你正在调整它的最小宽度以下。您的.clouds宽度不会更改为您的屏幕大小。

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

来源

2013-10-04 11:32:36

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-04 11:39:30 Mahib

我们怎样才能使头

回答

相关问题