2012-02-26 95 views
0

我试图让一个从淡蓝色到蓝色,中心是蓝色,右侧是蓝色到浅蓝色的淡入淡出的标题。标题的宽度必须为100%。有人可以告诉我,如果这是最好的办法有一个CSS驱动的标题部分,其中包括一个左渐变(背景图像淡入淡出),一个正确的淡出和中心标题部分..我遇到的问题是,目前的方式溢出/限制我设置像素时,有人决定调整浏览器窗口的大小。任何帮助将不胜感激..干杯。水平向左和向右淡出背景的css头

<div id="header"> 
<div id="leftfade"></div> 
<div id="header_container"> 
    <div id="languagechooser"></div> 
    <div id="logo"></div>  
    <div id="navbar"> 
     <ul> 
      <li class="navleft"><a href="aa.a">HOME</a></li> 
      <li><a href="aa.a">xxxxxxxx</a></li> 
      <li><a href="aa.a">xxxxxxxxxxxx</a></li> 
      <li><a href="aa.a">xxxxxxxxxx</a></li> 
      <li><a href="aa.a">xxxxxxxxxxxx</a></li> 

     </ul>                
    </div>     
</div>      
<div id="rightfade"></div></div> 

    body{ 
background: #FFFFFF; 
margin: 0px auto; 
font-size: 62.5%; 
color:#000000; 
width:100%; 
min-width:965px;} 
    #header{ 
position:relative; 
height:157px; 
background-color:#74d7ea;} 
    #header #leftfade 
    { 
    float:left; 
    background: url(../img/header_leftfade.png) repeat-y top left; 
    width:25%; 
    height:157px;} 
    #header #rightfade{ 
    position:absolute; 
    right:0; 
    background: url(../img/header_rightfade.png) repeat-y top right; 
    width:25%; 
    height:157px;} 
    #header #header_container{ 

float:left; 
position:relative; 
text-align:left; 
min-width:50%; 
    height:157px;} 
    #header #logo{ 
float:left; 
background: url(../img/logo.png) no-repeat; 
width:408px; 
height:63px; 
margin-top:20px;} 
    #header #languagechooser{ 
float:right; 
width:150px; 
height:50px; 
background-color:#ffffff; 
margin-left:100px;} 
    #header #navbar{ 
clear:both; 
position:relative; 
top:15px; 
height:30px; 
background-color:#63bdce; 
width:98%; 
overflow:hidden;} 
    #header #navbar ul{ list-style:none;} 

    #header #navbar ul li{ float:left;} 
    #header #navbar ul li a{ 
background: url(navi_bg_divider.png) no-repeat right; 
padding-right: 12px; 
font: bold 1.7em Myriad Pro, Arial, Helvetica, sans-serif; 
padding-left: 12px; 
display: inline-block; 
line-height: 30px; 
text-decoration: none; 
color:#ffffff;} 

回答

1

如果您想调整渐变大小,请尝试使用CSS3 gradient而不是使用图像。或者你可以用蓝色部分background-position:center;作为中心,让白色左侧和右侧占用任何调整大小后留下的空间。