简体   繁体   中英

How to change border color to background color if background is gradient?

I would like to change bottom border of my active menu item to website background color so it looks like an open tab but my background is gradient so it has different color in different parts of the website. How do i do that. I can't change it to none because i have another border that goes under the entire menu that i need to cover. Here is the link to my website http://woodworkingoc.com.hostasp.info/

I examined your .CSS file.

For nav > ul li.current you have background property with prefixes for FF, IE and Chrome. But something wrong with this property, so Chrome and FF hide this property in web inspector and not apply it to element. If write property correctly, gradient is applied to li element and overlayed bottom border of <div id="layout-navigation" class="group"> .

Use gradient generator (like http://www.colorzilla.com/gradient-editor/ ) to create correct gradient rules. For example:

nav > ul li.current {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #B9BDBF), color-stop(100%, #5C5E5F)) fixed;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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