如何使CSS3线性渐变中的渐变停止？ | 如何使CSS3线性渐变中的渐变停止

本文介绍了如何使CSS3线性渐变中的渐变停止？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请参阅此示例页面中的灰色栏：

CSS：

  #header {
 background-color：＃595454; 
 background-image：linear-gradient（
 top，
 rgba（255，255，255，.4）0％，
 rgba（255，255，255，.1 ）50％，
 rgba（255，255，255，.0）50.5％，
 rgba（255，255，255，.0）100％ 
 background-image：-webkit-linear-gradient（
 top，
 rgba（255，255，255，.4）0％，
 rgba（255，255，255 ，.1）50％，
 rgba（255,255,255,0.0）50.5％，
 rgba（255,255,255，.0）100％）; 
 background-image：-moz-linear-gradient（
 top，
 rgba（255，255，255，.4）0％，
 rgba（255，255，255 ，.1）50％，
 rgba（255,255,255,0.0）50.5％，
 rgba（255,255,255，.0）100％）; 
 background-image：-o-linear-gradient（
 top，
 rgba（255，255，255，.4）0％，
 rgba（255，255，255 ，.1）50％，
 rgba（255,255,255,0.0）50.5％，
 rgba（255,255,255，.0）100％）; 
 background-image：-ms-linear-gradient（
 top，
 rgba（255，255，255，.4）0％，
 rgba（255，255，255 ，.1）50％，
 rgba（255,255,255，.0）50.5％，
 rgba（255,255,255，.0）100％ 
 height：42px; 
 width：100％; 
}

HTML：

 < div id =header>< / div>

输出：

See the gray bar in this example page:

http://dss.com.bo/inicio.aspx

Here is my attempt at recreating that gradient using CSS3 - also using CSS3PIE:

#navigation {
    border: 1px solid #888888;
    border-radius: 22px;
    -moz-border-radius: 22px;
    -webkit-border-radius: 22px;
    height: 50px;
    font-family: Arial;
    background: #AAAAAA;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#AAAAAA), to(#757575));
    background: -webkit-linear-gradient(#AAAAAA, #757575);
    background: -moz-linear-gradient(#AAAAAA, #757575);
    background: -ms-linear-gradient(#AAAAAA, #757575);
    background: -o-linear-gradient(#AAAAAA, #757575);
    background: linear-gradient(#AAAAAA, #757575);
    -pie-background: linear-gradient(#AAAAAA, #757575);
    behavior: url(/Public/stylesheets/PIE.htc);
}

This result in:

How can I reduce the bleeding effect, so the color transition is harder?

解决方案

Have a white gradient fading in opacity up to 50% over your desired background color. This method can be used on any background color without changing the gradient CSS.

Demo: http://jsfiddle.net/ThinkingStiff/Zn5Qb/

CSS:

#header {
    background-color: #595454;
    background-image: linear-gradient(
            top,
            rgba( 255, 255, 255, .4 ) 0%,
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%,
            rgba( 255, 255, 255, .0 ) 100% );
        background-image: -webkit-linear-gradient(
            top,
            rgba( 255, 255, 255, .4 ) 0%,
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%,
            rgba( 255, 255, 255, .0 ) 100% );
        background-image: -moz-linear-gradient(
            top,
            rgba( 255, 255, 255, .4 ) 0%,
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%,
            rgba( 255, 255, 255, .0 ) 100% );
        background-image: -o-linear-gradient(
            top,
            rgba( 255, 255, 255, .4 ) 0%,
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%,
            rgba( 255, 255, 255, .0 ) 100% );
        background-image: -ms-linear-gradient(
            top,
            rgba( 255, 255, 255, .4 ) 0%,
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%,
            rgba( 255, 255, 255, .0 ) 100% );
    height: 42px;
    width: 100%;
}

HTML:

<div id="header"></div>

Output:

这篇关于如何使CSS3线性渐变中的渐变停止？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！