简体   繁体   English

将导航栏颜色混合到背景颜色(渐变?)

[英]Blend navigation bar colour to background colour (gradient?)

I have a navigation bar which is a slightly darker shade to my background colour. 我有一个导航栏,它的背景颜色略深一些。 I want to have a gradient going from the center to both the right and left sides, so that the rightmost and leftmost bits of the nav bar reach the background colour. 我希望从中心到右侧和左侧都有一个渐变,这样导航栏的最右边和最左边的位就会达到背景颜色。 Is this possible to do? 这可能吗?

<body>
<div id="container">
    <div id="header">
        <h1>
            <!--<a href="#"><img src="tracylogo7.jpg" alt="Millington and Hope" /></a> -->
            <a href="#"><img src="tracylogo5_header.jpg" alt="Millington and Hope" /></a>
        </h1>
        <h2>
            <!--<a href="#"><img src="tracylogo5_header.jpg" alt="Millington and Hope" /></a> -->
        </h2>   
    </div>
    <ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="stock.html">Stock</a></li>
        <li><a href="events.html">Events</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
    <div id="box">
            <a href="#"><img src="home1.jpg" alt="Slideshow Image 1" /></a>

            <a href="#"><img src="home3.jpg" alt="Slideshow Image 2" /></a>

            <a href="#"><img src="home2.jpg" alt="Slideshow Image 3" /></a>
    </div>
    <div id="footer">
        <p class="client">Tel: 0788740&nbsp;&nbsp;&nbsp;&nbsp;E-mail: tjdelane@hotmail.co.uk</p>

    </div>
</div>      
</body>


#nav
{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center; 
  background:rgb(161,153,134)
  background: #999; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='(#A19986', endColorstr='#ABA390'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#A19986), to(#ABA390)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */ 
}

Yes. 是。 CSS can do gradients with varying degrees of cross-browser success (including linear, radial and color stops). CSS可以在不同程度的跨浏览器成功(包括线性,径向和颜色停止)的情况下进行渐变。 Try this generator to build something: http://www.colorzilla.com/gradient-editor/ 试试这个生成器来构建一些东西: http//www.colorzilla.com/gradient-editor/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM