Sadece css ile birden fazla arka plan renkleri vardır

Question

Birden çok arka plan rengiyle tek bir öğeye sahip olmak isterim? Analog ait:

<div class="multiplebackground"> 
    <div style="background-color:red"></div> 
    <div style="background-color:green"></div> 
    <div style="background-color:blue"></div> 
</div> 

ama bazı metin içeriği ile sadece 1 div varsa:

<div class="multiplebackground"> 
    ... 
</div> 

.multiplebackground { 
    ??? 
} 

Yoksa mümkün değil mi?

Answer 1

Sen gradyanlar ile bunu başarabilirsiniz. Sadece bir renkten aynı renge harmanlamanız ve daha sonra sıfır piksel boyunca bir sonraki renkle karıştırmanız gerekir.

.Neapolitan { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: linear-gradient(to bottom, red 0%, red 33%, green 33%, green 66%, blue 66%, blue 100%); 
 
}

<div class="Neapolitan"> 
 

 
</div>

Answer 2

doğrusal gradyan olabilir

http://www.w3schools.com/css/css3_gradients.asp

body, html { 
 
margin: 0; 
 
    padding: 0; 
 
} 
 

 
    #grad { 
 
background: red; /* For browsers that do not support gradients */ 
 
background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */ 
 
background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */ 
 
background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */ 
 
background: linear-gradient(red, yellow, green); /* Standard syntax */ 
 
}

<div id="grad"></div>

Answer 3

Sen ile yapabilirsiniz linear-gradient

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.multiplebackground { 
 
    min-height: 100vh; 
 
    background: linear-gradient(to bottom, red 0%, red 33%, green 33%, green 66%, blue 66%, blue 100%); 
 
    background-size: 100%; 
 
    background-repeat: no-repeat; 
 
}

<div class="multiplebackground"></div>

Answer 4

Evet ... renk ile lineer bir miktar kullanılarak

.multiplebackground { 
 
    height: 50px; 
 
    background: linear-gradient(to right, red, red 33%, blue 33%, blue 66%, green 66%); 
 
}

<div class="multiplebackground"> 
 

 
</div>

durur (Önekli alternatifleri ve IE özel kod eski tarayıcılar için kullanılabilir)

Answer 5

Bunu css3 degrade arka plan özelliği ile yapabilirsiniz! I% 33;% 66, iki kez green tanımlayan

background: linear-gradient(to right, 
      red 33%, 
      green 33%, 
      green 66%, 
      blue 66%); 

dikkat edin. Ben nerede biter başlatıldığında VE nereye tanımlamak zorunda olmasıdır, bu yüzden sen (an itibariyle) sadece ilk satır farklı stil ekleyebilirsiniz CSS ile her degrade

Answer 6

arasında keskin bir kenarı olsun.

p: first-line {background-color: mercan;}

gibi bir şey istiyorsanız: n'inci-line() Eğer javascript bunu yapmak zorunda. http://codepen.io/jnowland/pen/AifjK/

var nthLine = function() { 
    var content = $('h1').text(); 
    var words = content.split(" "); 
    var cache = words[0]; //because we miss the first word as we need to detect the height. 
    var lines = []; 
    $("header").append('<h1 id="sample">' + words[0] + '</h1>'); 
    var size = $('#sample').height(); 
    var newSize = size; 
    for (var i = 1; i < words.length; i++) { 
     var sampleText = $('#sample').html(); 
     cache = cache + ' ' + words[i]; 
     marker = [i]; 
     $('#sample').html(sampleText + ' ' + words[i]); 
     var newSize = $('#sample').height(); 
     if (size !== newSize) { 
      cache = cache.substring(0, cache.length - (words[i].length + 1)); 
      lines.push(cache); 
      cache = words[i]; 
      size = $('#sample').height(); 
     } 
    } 
    lines.push(cache); 
    cache = '' 
    for (var i = 0; i < lines.length; i++) { 
     cache = cache + ' <span class="line-' + [i] + '">' + lines[i] + '</span>' 
    } 
    $('#sample').remove(); 
    cache = cache.substring(1); 
    //prints the result. 
    $('h1').html(cache); 
}; 
nthLine(); 
$(window).resize(nthLine);