如何為標簽設置漸變色？

Question

我必須設置特定選項卡的漸變顏色，其中包含從第一個選項卡到最后一個選項卡的漸變顏色，如何設置它。 為此，我使用了以下代碼

  $(function() {
    $( "#tabs" ).tabs();

      $('.gradient_me').each( function(index) {
          var color = 255-index*75;
          $(this).css('background', 'rgb('+color+', 0, 0)');
      });
  });

但是問題是一個選項卡僅包含一種顏色，我想要從第一個選項卡到最后一個選項卡的漸變顏色，我該怎么做？

Answer 1

簡單！

您只需要一個線性漸變CSS規則。

  $(function() {
    $( "#tabs" ).tabs();

      $('.gradient_me').each( function(index) {
          var color = 'rgb(' + (255-index*75) + ', 0, 0)';
          var color2 = 'rgb(' + (255-index*75 - 75) + ', 0, 0)';
          $(this).css('background', '-moz-linear-gradient(left, '+color+', ' + color2 +')');
          $(this).css('background', '-webkit-linear-gradient(left, '+color+', ' + color2 +')');
          $(this).css('background', '-ms-linear-gradient(left, '+color+', ' + color2 +')');
          $(this).css('background', '-o-linear-gradient(left, '+color+', ' + color2 +')');
          $(this).css('background', 'linear-gradient(left, '+color+', ' + color2 +')');

      });
  });

演示： http ： //jsfiddle.net/5zfyU/8/