多个背景颜色只与css [英] Multiple background colors with css only

问题描述

我想要一个有多种背景颜色的元素吗？
模拟：

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

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

 < div class =multiplebackground> 
 ... 
< / div> 
 
 .multiplebackground {
 ??? 
} 
  

还是不可能？

解决方案

您可以通过渐变实现。

 。 {height：200px; width：200px;背景：线性梯度（底部，红色0％，红色33％，绿色33％，绿色66％，蓝色66％，蓝色100％）;}  

pre class =snippet-code-html lang-html prettyprint-override> < div class =Neapolitan>< / div>

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

I want to have one element with multiple background colors? Analog of:

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

but if I have only 1 div with some text content:

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

.multiplebackground {
  ???
}

Or it is not possible?

解决方案

You can achieve this with gradients. You just need to blend from a colour to the same colour, and then blend to the next colour across zero pixels and so on.

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

(Prefixed alternatives and IE specific code is available for older browsers)

这篇关于多个背景颜色只与css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！