Question

假设我有一个100px的div，整个文本都充满了文本。

如何设置div的样式，使其部分由颜色从左到右填充，例如红色和div的其余部分是另一种颜色？当我说填充时，我指的是背景，因此文本仍然可见。

Answer 1

.gauge {
  position: relative; 
  width:  100px; 
  height: 25px; 
  background: #7785AC;
}

.value {
  position: absolute; 
  top:  0; 
  left: 0; 
  width:  35%; 
  height: 100%; 
  background: #5B2A86; 
  margin:  0; 
  padding: 0; 
  z-index: 0;
}

.text {
  position: absolute; 
  top:  0; 
  left: 0; 
  width:  100%; 
  height: 100%; 
  color: #fff;
  text-align: justify; 
  margin:  0; 
  padding: 0; 
  z-index: 1;
}

<div class="gauge">
  <span class="value"></span>
  <span class="text">yourText</span>
</div>

Answer 2

如果您关心语义标记，或者只是想让您的标记保持理智;您必须使用图像或CSS3渐变：

div {
    background: linear-gradient(left,
       #ff3232 0%,
       #ff3030 50%,
       #e5e5e5 50%,
       #e5e5e5 100%
    );
}

这是小提琴：http://jsfiddle.net/TyyKJ/

在生产中，您必须添加所有供应商前缀：

div {
    background: -moz-linear-gradient(left, #ff3232 0%, #ff3030 51%, #e5e5e5 51%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3232), color-stop(51%,#ff3030), color-stop(51%,#e5e5e5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ff3232 0%,#ff3030 51%,#e5e5e5 51%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ff3232 0%,#ff3030 51%,#e5e5e5 51%,#e5e5e5 100%); /* Opera11.10+ */
    background: linear-gradient(left, #ff3232 0%,#ff3030 51%,#e5e5e5 51%,#e5e5e5 100%); /* W3C */
}

Answer 3

试试这个：http://jsfiddle.net/TB2F3/

HTML

<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
    <div class="text">text text text text text</div>
</div>

CSS

.wrapper{ position:relative; width:100px; height:20px; border:solid 1px #000; overflow:hidden; }
.left{ position:absolute; height:20px; left:0px; top:0px; width:30%; background-color:#0099FF; z-index:50; }
.right{ position:absolute; height:20px; right:0px; top:0px; width:70%; background-color:#9933CC; z-index:50; }
.text{ position:absolute; height:20px; left:0px; top:0px; z-index:100; }

使用css计量div（如条形图）

3 个答案: