1

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

（但此步骤使用.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;  
    }

但我很想知道：

  1. 如何调整渐变的位置？
  2. 有没有更简单的方法可以为所有可比较的浏览器（不包括 IE）编写代码？

我已经查看了一些之前的帖子，但没有关于调整渐变的内容：

4

1 回答 1

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。它在过去帮助了我很多次。它甚至可以创建所有浏览器特定的样式。可能是一个很好的起点。

于 2013-11-12T22:00:26.913 回答