英语 |
翻译 | 网络后端开发
让一个网站脱颖而出是很困难的。 为此，这里有一个可以改进任何着陆页或标题的小技巧：使用渐变文本。
只要确保不要过度使用它即可。 渐变文本不应该用在较长的文本中。 但是，它可以用在标题或特定的突出文本中。 容易吸引用户的注意力。
你可能会松一口气，你很难直接给文字颜色设置渐变，特别是如果你有使用设计工具的经验，可能会更好，如果没有，你可以学习明天的内容，使用 CSS 来实现这一点影响。
例如，颜色：线性渐变（黄色，红色）将难以正常工作。
然而css 效果，渐变文本可以在CSS中实现，只需要一些额外的步骤。
最好从一些粗体文本开始。 这将使渐变突出并使文本更具可读性。
我将使用的文本是使用具有以下值的字体缩写样式设置的：
font: bold 120px Poppins, sans-serif;第 1 步：添加渐变
首先css 效果，我们需要添加渐变作为背景。
默认情况下，渐变将从上到下，但我们也可以指定方向。
如果你想要水平渐变，向右就可以了，稍微倾斜60度看起来更自然。
代码如下所示：
.gradient-text {background-image: linear-gradient(60deg, #E21143, #FFB03A);}
如果您想学习如何创建所需的任何渐变，并且对 CSS 渐变不太了解，则只需准备考试即可。
第 2 步：剪辑
现在我们需要使渐变仅显示文本所在的位置。 我们可以使用background-clip属性来实现这一点。
您可能已经知道，使用此属性，我们可以将背景剪切到元素的边框、填充或内容框。
它还可以将背景剪切到文本上。
.gradient-text {background-image: linear-gradient(60deg, #E21143, #FFB03A);background-clip: text;}
如果您尝试这段代码，渐变看起来就会消失。 这是因为渐变位于文本下方。
第三步：显示
为了显示文本下方的渐变，我们需要使文本透明。 我们可以通过设置 color:transparent 来做到这一点。
.gradient-text {background-image: linear-gradient(60deg, #E21143, #FFB03A);background-clip: text;color: transparent;}
您可能在这里使用背景速记，但不要。
不幸的是，background 的简写版本background-clip 不支持text 关键字。
如果您必须支持 Internet Explorer，则需要转回黑色。
包装我们之前编译的所有@supports。 这样，它只能在现代浏览器中呈现。
之后，在 @supports 块之外，为文本设置后备颜色。 它可能是应该出现在渐变中的颜色，但与设计的其余部分配合得很好。
/* fallback for IE */.gradient-text {color: red;}/* gradient text for modern browsers */@supports (background-clip: text) {.gradient-text {background-image: linear-gradient(60deg, #E21143, #FFB03A);background-clip: text;color: transparent;}}
注意：虽然@supports规则本身在IE中不受支持，但它仍然会忽略以上所有内容。
1. 有点粗俗的开场白
如果是两年前，“兼容梯度效应”的想法就不会被提出来。 当时说起渐变背景，大多数人想到的渐变背景都是IE的渐变滤镜，其他浏览器还不支持，但是，明天，随着CSS3的支持越来越多，它已经成为可能实现兼容渐变背景效果。 本文将展示如何实现兼容的渐变背景效果。 在众多浏览器中，目前不支持Opera浏览器。
本文示例的效果都是相同的效果css效果，即垂直渐变，起始颜色为蓝色，结束颜色为灰色，结束白色的透明度为0.5。
2、IE浏览器下渐变背景
在IE浏览器中使用渐变背景需要使用IE的渐变滤镜。 下面的代码：
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
相关说明：
上面的滤镜代码主要有三个参数，分别是：startcolorstr、endcolorstr、gradientType。
其中，gradientType=1表示垂直渐变，gradientType=0表示水平渐变。 startcolorstr="color" 表示渐变开始处的颜色，endcolorstr="color" 表示渐变结束处的颜色。
上面的代码实现了从黑到黑的渐变，但是不包含透明度的变化。 这是因为 IE 仍然不支持不透明度属性和 RGBA 颜色。 要实现IE下的透明度变化，仍然需要IE过滤器。 IE透明滤镜镜像功能比较强大，类似于Firefox或Safari浏览器中的css-gradient背景渐变的用法。 例如下面的使用：
filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
各参数含义如下：
opacity代表透明度，默认范围是从0到100，尽管它们是比率。 即0是完全透明，100是完全不透明。
finishopacity是一个可选参数，如果要设置渐变的透明度效果，可以使用它们来指定最后的透明度。 范围也是 0 到 100。
style 用于指定透明区域的形状特征：
0 表示均匀形状
1 表示线性
2代表径向
3代表梯形。
startx 渐变透明效果开始的 X 坐标。
starty 渐变透明效果开始的 Y 坐标。
finishx 渐变透明效果结束的 X 坐标。
finishy 渐变透明效果结束的 Y 坐标。
基于以上，在IE下实现带透明度变化的红蓝垂直渐变的代码如下：
.gradient{
width:300px; height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
}
结果如下：
3、Firefox浏览器下渐变背景
Firefox浏览器（Firefox 3.6+）下渐变背景的实现，需要用到CSS3渐变属性-moz-linear-gradient属性。 在上一篇文章中，我详细介绍了Firefox3.6下渐变背景的实现。 如果有兴趣，可以点击这里：前端入门学习。 我这里就不详细说了。 对于本文开头提到的疗效的实现，可以参考以下代码：
.gradient{
width:300px;
height:150px;
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
这段代码在Firefox3.6浏览器下的效果是：
4、chrome/Safari浏览器下渐变背景实现
对于webkit核心的浏览器，如Chrome/Safaricss效果，渐变背景也是使用CSS3渐变方法css-gradient，具体是-webkit-gradient来实现的，与Firefox浏览器的使用有一些区别。 我在上一篇文章中对此进行了非常详细的介绍，您可以点击此处：找到适合您的后端开发方向。 具体使用就不详细说了，看下面的代码：
.gradient{
width:300px;
height:150px;
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
}
这段代码在Safari 4浏览器中的效果是：
