仅使用 css 的多种背景颜色

Question

我想要一个元素有多种背景颜色？ 类比：

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

但如果我只有 1 个带有一些文本内容的 div：

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

.multiplebackground {
  ???
}

还是不可能？

Answer 1

您可以使用渐变来实现这一点。您只需要从一种颜色混合到相同颜色，然后在零像素之间混合到下一种颜色，依此类推。

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

（前缀替代和 IE 特定代码可用于旧版浏览器）

Answer 2

您可以通过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 3

是的...使用带有色标的线性渐变

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

<div class="multiplebackground">

</div>

Answer 4

您可以使用 css3 渐变背景属性来做到这一点！

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

请注意，我将green 定义了两次，从 33% 到 66%。那是因为我必须定义它从哪里开始和在哪里结束，所以我在每个渐变之间都有一个锐利的边缘

Answer 5

可能是线性渐变

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 6

使用 CSS，您可以（截至目前）只设置不同的第一行样式。

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

如果你想要类似 :nth-line() 的东西，你必须用 javascript 来实现。

这是一个例子：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);