[英]hiding overlapped text is failing in case of linear gradient
i was trying the code shown in this fiddle:
我正在尝试此小提琴中显示的代码:
http://jsfiddle.net/2aWcV/ http://jsfiddle.net/2aWcV/
how to remove the overlap if "$number" can have any number of digits and we dont know its size as the number of digits is fetched from some other file.($number is a random number generated) $number must have an opaque background so that the text underneath it doesn't show through.(text must be to the left of $number 如果“ $ number”可以有任意数量的数字,并且我们不知道它的大小,因为如何从其他文件中获取数字的数量,如何消除重叠。($ number是生成的随机数)$ number必须具有不透明的背景这样它下面的文本就不会显示出来。(文本必须在$ number的左边
The html code is: 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>
And this works perfectly fine when we have a background as a single color rather than a gradient why is that so and here is the link to the fiddle with background as a single color: http://jsfiddle.net/Re9ZN/ Can someone give me a solution so that it works well when we have a gradient. 当我们将背景作为单一颜色而不是渐变时,这非常完美,为什么呢,这是将小提琴与背景作为单一颜色的链接: http : //jsfiddle.net/Re9ZN/有人可以给吗我提供了一个解决方案,以便当我们使用渐变色时效果很好。
Following code should do the trick for you. 以下代码可以为您解决问题。
Change to this in your css class: 在您的CSS类中更改为:
.variation h2 span{
background: linear-gradient(to left, #339933,#003300);
position:absolute;
right:0;
}
DEMO : http://jsfiddle.net/Akki619/xzW6A/ 演示 : http : //jsfiddle.net/Akki619/xzW6A/
For your comment EDIT 1 对于您的评论编辑1
You can use below code, please update colors as per your need. 您可以使用以下代码,请根据需要更新颜色。 It covers all the browsers.
它涵盖了所有浏览器。
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 */
NOTE: Answers can not expected the way you desired, it should be considered as "to get you started." 注意:不能以您期望的方式预期答案,应将其视为“入门”。
This below image is max I can help you out as far as gradient goes. 下面这张图片是最大的,我可以为您提供最大的帮助。 As sections are divided, I don't think with current implementation it is possible.
由于各节的划分,我认为当前的实现是不可能的。
CSS CODE: CSS代码:
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 */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.