CSS3 背景渐变答案

【问题标题】：CSS3 Background GradientCSS3 背景渐变
【发布时间】：2023-12-26 14:32:01
【问题描述】：

我为我正在测试的页面设置了这个类（刚开始尝试实现 CSS3，所以请放轻松）。

.CSS3TESTDIV{
    width:228px;
    height:300px;
    background-color: #fff3;
    background-image: -moz-linear-gradient(0% 100% 90deg, #0068b3, #fff);
        background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#fff), to(#0068b3)); 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border: 1px solid #0068b3; 
    padding: 10px;
    margin:0 10px 0 0;
    -moz-box-shadow: 7px 7px 7px #888;  
    -webkid-box-shadow: 7px 7px 7px #888;
    box-shadow: 7px 7x 7px #888;
    float:left;         
}

在 FF 在 PC 和 Mac 上看起来一切都很好，我知道 IE 不支持这个。

我的问题是关于渐变的：从我上面的渐变来看，渐变是相当平滑的，但我只想让一点蓝色从底部爬升，而不是像我在浏览器上看到的那样淡化。我玩过百分比和数值，但我似乎无法按照我想要的方式进行操作。

我怎样才能得到我想要的效果？

再一次，我想要从上到下的大部分是白色，而底部的蓝色只有一点点褪色。谢谢

【问题讨论】：

使用图片代替非官方渐变？老实说，无论如何，文字背后的渐变背景让我很恼火。使其更难阅读。
是的，我是。这些渐变不是也从未被官方支持的属性。是的，文本 do 后面的渐变使其更难阅读。
你能看懂这段文字吗？ jsfiddle.net/m9Uhb
我不是说你看不懂，我是说渐变让阅读变得更难，我已经说过三遍了。

标签： css background linear-gradients

【解决方案1】：

您想使用色标。

所以将第一个颜色设置为 0%，第二个设置为 90%，第三个设置为 100%（这将是蓝色）。

你可以使用这个工具来达到你想要的效果http://gradients.glrzad.com/

确保添加第三种颜色并将其定位在 90%。

干杯，

马尔科

【讨论】：

【解决方案2】：

没错，还有一个我经常使用的网站ColorZilla。

它非常有用，尤其是对于确保所有浏览器都能看到您的渐变。（我以前滑过那里：/）

【讨论】：