Question

我必须用红色为进度条的 50％着色。这是我尝试过的，我的css和html：

.progress {
  width:100%;
  display: inline-block;
  height: 0.4615384615384615em;
  padding: 0.0769230769230769em;
  background: #fff;
  border: 1px solid #c0c0c0;
  position: relative;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  background: #f9f9f9;
  background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
  background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
  filter: none \9;
}
.progress.complete {
  height: 0.9em;
  position: relative;
}

<div id="id1" class="progress complete">
    <span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);" rel="tooltip"></span>
</div>

如何在不向输出中的<span>元素添加任何文本的情况下为其着色？

Answer 1

如果您想在没有span tag的情况下执行此操作，请使用下面的pseudo selector ::after来确定风格，

＆＃13;

.progress {
  width:100%;
  display: inline-block;
  height: 0.4615384615384615em;
  padding: 0.0769230769230769em;
  background: #fff;
  border: 1px solid #c0c0c0;
  position: relative;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  background: #f9f9f9;
  background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
  background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
  filter: none \9;
  overflow:hidden;
}
.progress:after{
  content:'';
  position:absolute;
  background: red; 
  left: 0%;
  top:0;
  width: 50%;
  height:10px;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);
  z-index:9;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}

＆＃13;

<div id="id1" class="progress complete">

</div>

＆＃13;

Span tag default显示为inline，因此您需要将其更改为inline-block和height。

＆＃13;

.progress {
  width: 100%;
  display: inline-block;
  height: 0.4615384615384615em;
  padding: 0.0769230769230769em;
  background: #fff;
  border: 1px solid #c0c0c0;
  position: relative;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  background: #f9f9f9;
  background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
  background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
  filter: none \9;
  overflow: hidden;
}

.progress.complete {
  height: 0.9em;
  position: relative;
}

span {
  background: red;
  left: 0%;
  width: 50%;
  height: 15px;
  display: block;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
   box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.2);
}

＆＃13;

<div id="id1" class="progress complete">
  <span title="progress bar" rel="tooltip"></span>
</div>

＆＃13;

Answer 2

您忘了提及height＆amp; position到span代码

.progress {
  width:100%;
  display: inline-block;
  height: 0.4615384615384615em;
  padding: 0.0769230769230769em;
  background: #fff;
  border: 1px solid #c0c0c0;
  position: relative;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  background: #f9f9f9;
  background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
  background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
  filter: none \9;
}
.progress.complete {
  height: 0.9em;
  position: relative;
}

<div id="id1" class="progress complete">
    <span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);height: 100%; position: absolute;top: 0;" rel="tooltip"></span>
</div>

着色50％的进度条

2 个答案: