Question

最近，我一直在浏览器中进行更多设计，并使用纯代码而不是图像来实现效果。我已经使用过几种方法来了解如何为网站的文本添加渐变，例如：

（此步骤使用.png透明图像）

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

和纯代码选项：

h1 {  
        position: relative;  
        font-size: 70px;  
        margin-top: 0;  
        font-family: 'Lobster', helvetica, arial;  
    }  

    h1 a {  
        text-decoration: none;  
        color: #666;  
        position: absolute;  

        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));  
    }  

    h1:after {  
        content : 'Hello World';  
        color: #d6d6d6;  
        text-shadow: 0 1px 0 white;  
    }

但我很想知道：

如何调整渐变的位置？
是否有更简单的方法为所有类似的浏览器（IE除外）编码？

我已经回顾了一些先前的帖子，但没有关于调整渐变的内容：

Answer 1

要调整渐变的位置，您必须编辑以下行（不完全确定在哪里）：

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));

有助于实现此目的的超酷工具是Ultimate CSS Gradient Generator。这在过去曾多次帮助过我。它甚至可以创建所有浏览器特定的样式。可能是个好地方。

如何在浏览器中进行设计时调整文本的渐变？

1 个答案: