скрытия перекрывается текст не удается в случае линейного градиента

Question

я пытался код, приведенный в этой скрипке:

http://jsfiddle.net/2aWcV/

как удалить перекрытие, если «$ число» может иметь любое количество цифр и мы не знаем его размер, так как количество цифр извлекается из какого-либо другого файла. ($ 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/ Может кто-то дать мне решение, чтобы оно работало хорошо, когда у нас есть градиент.

Answer 1

Следующий код должен сделать трюк для вас.

Изменение этого в классе CSS:

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

} 

DEMO: http://jsfiddle.net/Akki619/xzW6A/

Для вашего комментария EDIT 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 */ 

Примечание: ответы не могут ожидать, как вы хотели, это следует рассматривать как «чтобы вы начали.»

Это изображение ниже max. Я могу помочь вам до достижения градиента. Поскольку разделы разделены, я не думаю, что с текущей реализацией это возможно.

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 */