Nhiều màu nền với css chỉ

Question

Tôi muốn có một phần tử có nhiều màu nền? Analog của:

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

nhưng nếu tôi chỉ có 1 div với một số nội dung văn bản:

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

.multiplebackground { 
    ??? 
} 

Hoặc nó không phải là có thể?

Answer 1

Bạn có thể đạt được điều này với độ dốc. Bạn chỉ cần pha trộn từ một màu sắc cho cùng một màu sắc, và sau đó pha trộn với màu sắc tiếp theo trên không pixel và như vậy.

.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>

(lựa chọn thay thế tiền tố và mã cụ IE có sẵn cho các trình duyệt cũ)

Answer 2

Có thể là tuyến tính dốc

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

Bạn có thể làm điều này với 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

Có ... sử dụng một gradient tuyến tính với màu sắc dừng

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

<div class="multiplebackground"> 
 

 
</div>

Answer 5

Bạn có thể làm điều này với thuộc tính nền gradient css3!

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

Lưu ý rằng tôi xác định green hai lần, từ 33% đến 66%. Đó là bởi vì tôi phải xác định nơi nó bắt đầu VÀ nơi nó kết thúc, vì vậy tôi có được một cạnh sắc nét giữa mọi gradient

Answer 6

Với CSS bạn có thể (ngay bây giờ) chỉ tạo kiểu đầu tiên khác nhau.

p: first-dòng {background-color: san hô;}

nếu bạn muốn một cái gì đó như: thứ n-line(), bạn phải làm cho nó trong javascript.

Dưới đây là một ví dụ về điều đó: 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);