Question

我有以下结构：

<li class="myclass" ng-class="myAngularClass">
  <div> div1
     <div> div2
     </div>
  </div>
</li>

元素li具有动态高度和宽度。 "myAngularClass"有一个属性background-color: green。

背景颜色跨越整个li，涵盖了其中的所有div。但我希望背景颜色的宽度只有10％，所以它只跨越div1。我看过This链接，但我没有太多灵活性来添加其他标签。＆＃34; myAngularClass＆＃34;返回一个求值为类名的字符串，我在该类名中写入了background-color属性，以便li具有正确的背景颜色。

简而言之，我正在寻找一种方法来为一个元素提供背景颜色（例如背景颜色宽度），但只有一定的长度。

如果可能，请告诉我

Answer 1

您无法控制background-color属性，但可以控制渐变宽度，因此您可以创建一个实际上仅由一种颜色构建的渐变：

background: linear-gradient(to right, rgba(0,255,0,1) 0%,rgba(0,255,0,1) 10%,rgba(0,255,0,0) 10%,rgba(0,0,0,0) 100%); /* W3C */

对于跨浏览器支持，您可以使用此工具：http://www.colorzilla.com/gradient-editor/#00ff00+0,00ff00+10,000000+100&1+0,1+10,0+11,0+100;Custom

您也可以在后台使用图片。

背景颜色只需要跨越其元素的某个百分比

1 个答案: