1

这是渐变我正在尝试这个小提琴中显示的代码：

http://jsfiddle.net/2aWcV/

如果“$number”可以有任意位数并且我们不知道它的大小，因为位数是从其他文件中获取的，如何消除重叠。（$number 是生成的随机数）$number 必须具有不透明的背景这样它下面的文本就不会显示出来。（文本必须在 $number 的左侧

html代码是：

<div class="body">     
    <div class="variation font700 green"> 
        <h2> 
            overflown text must be hidden and the visible text  must be in single line
            <span class="divider"> 
                $number 
            </span>
        </h2>
    </div>
    <div class="clear"></div>  
</div>

当我们将背景作为单一颜色而不是渐变时，这非常有效，为什么会这样，这里是指向小提琴的链接，背景是单一颜色：http: //jsfiddle.net/Re9ZN/ 有人能给我有一个解决方案，以便在我们有渐变时效果很好。

4

1 回答 1

1

以下代码应该为您解决问题。

在您的 css 类中更改为：

.variation h2 span{
    background: linear-gradient(to left, #339933,#003300);
    position:absolute;
    right:0;

}

演示：http: //jsfiddle.net/Akki619/xzW6A/

对于您的评论编辑 1

您可以使用以下代码，请根据需要更新颜色。它涵盖了所有浏览器。

 background-color: #F07575; /* fallback color if gradients are not supported */
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome and Safari */
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Fx (3.6 to 15) */
  background-image:     -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For pre-releases of IE 10*/
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ 
  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */

注意：答案不能按你所希望的方式进行，它应该被认为是“让你开始”。

下图是最大的，就渐变而言，我可以为您提供帮助。由于部分被划分，我认为当前的实现是不可能的。

在此处输入图像描述

代码：

background: #7fbf70; /* Old browsers */
background: -moz-linear-gradient(left,  #7fbf70 0%, #76b868 1%, #73b766 2%, #60ac5a 4%, #48a04d 10%, #3c9a47 13%, #309643 19%, #289441 27%, #289341 41%, #168b3e 47%, #08893d 49%, #00853c 52%, #005b28 88%, #005424 96%, #005424 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#7fbf70), color-stop(1%,#76b868), color-stop(2%,#73b766), color-stop(4%,#60ac5a), color-stop(10%,#48a04d), color-stop(13%,#3c9a47), color-stop(19%,#309643), color-stop(27%,#289441), color-stop(41%,#289341), color-stop(47%,#168b3e), color-stop(49%,#08893d), color-stop(52%,#00853c), color-stop(88%,#005b28), color-stop(96%,#005424), color-stop(100%,#005424)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #7fbf70 0%,#76b868 1%,#73b766 2%,#60ac5a 4%,#48a04d 10%,#3c9a47 13%,#309643 19%,#289441 27%,#289341 41%,#168b3e 47%,#08893d 49%,#00853c 52%,#005b28 88%,#005424 96%,#005424 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #7fbf70 0%,#76b868 1%,#73b766 2%,#60ac5a 4%,#48a04d 10%,#3c9a47 13%,#309643 19%,#289441 27%,#289341 41%,#168b3e 47%,#08893d 49%,#00853c 52%,#005b28 88%,#005424 96%,#005424 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #7fbf70 0%,#76b868 1%,#73b766 2%,#60ac5a 4%,#48a04d 10%,#3c9a47 13%,#309643 19%,#289441 27%,#289341 41%,#168b3e 47%,#08893d 49%,#00853c 52%,#005b28 88%,#005424 96%,#005424 100%); /* IE10+ */
background: linear-gradient(to right,  #7fbf70 0%,#76b868 1%,#73b766 2%,#60ac5a 4%,#48a04d 10%,#3c9a47 13%,#309643 19%,#289441 27%,#289341 41%,#168b3e 47%,#08893d 49%,#00853c 52%,#005b28 88%,#005424 96%,#005424 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7fbf70', endColorstr='#005424',GradientType=1 ); /* IE6-9 */
于 2013-08-21T09:03:29.390 回答