Question

我在.progress上有一个工具提示，工具提示中有一个使用伪类（:after）的箭头。我想在它上面使用工具提示背景颜色的伪类。

我想继承<span>背景的孩子（span:after），但我不知道如何。
（也许在JS或SASS中是可能的，所以如果有人知道帮助解决的话）

＆＃13;

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Bootstrap Progress Bar Percentage</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <style>
      .progress {
        overflow: visible;
        margin-bottom: 26px;
        height: 4px;
      }
      .progress .progress-bar {
        position: relative;
        border-radius: 4px;
      }
      .progress .progress-bar span {
        position: absolute;
        background-color: inherit;
        top: -20px;
        font-size: 10px;
        line-height: 10px;
        padding: 2px 3px 2px 4px;
        right: -1.4em;
        border-radius: 2px;
          filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.21));
      }
      .progress .progress-bar span:after {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(255, 255, 255, 0);
        border-top-color: blue;
        border-width: 5px;
        margin-left: -5px;
      }
    </style>
  </head>
  <body style="width: 50%; margin: auto;padding-top: 20px">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
        <span>50%</span>
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
        <span>100%</span>
      </div>
    </div>
  </body>
</html>

＆＃13;

Answer 1

您无法将background-color继承到border-color。但您可以使用border-color扩展Bootstrap bg-*类，以便继承颜色。

请参阅以下代码（使用扩展的.bg-*类和.progress-bar）：

＆＃13;

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css';

body {
  margin:auto;
  padding-top:26px;
  width:50%;
}
.bg-primary {
  border-color:rgb(0, 123, 255);!important;
}
.bg-secondary {
  border-color:rgb(134, 142, 150)!important;
}
.bg-success {
  border-color:rgb(40, 167, 69)!important;
}
.bg-danger {
  border-color:rgb(220, 53, 69)!important;
}
.bg-warning {
  border-color:rgb(255, 193, 7)!important;
}
.bg-info {
  border-color:rgb(23, 162, 184)!important;
}
.bg-dark {
  border-color:rgb(52, 58, 64)!important;
}
.progress {
  height:4px;
  margin-bottom:26px;
  overflow:visible;
}
.progress .progress-bar {
  border-color:#007bff;
  border-radius: 4px;
  position:relative;
}
.progress .progress-bar span {
  background-color:inherit;
  border-color:inherit;
  border-radius:2px;
  filter:drop-shadow(0 0 5px rgba(0, 0, 0, 0.21));
  font-size:10px;
  line-height:10px;
  padding:2px 3px 2px 4px;
  position:absolute;
  right:-1.4em;
  top:-20px;
}
.progress .progress-bar span:after {
  border:0 solid transparent;
  border-color:rgba(255, 255, 255, 0);
  border-top-color:inherit;
  border-width:5px;
  content:'';
  height:0;
  left:50%;
  margin-left:-5px;
  pointer-events:none;
  position:absolute;
  top:100%;
  width:0;
}

＆＃13;

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%;">
    <span>20%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%;">
    <span>30%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%;">
    <span>40%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;">
    <span>50%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;">
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%;">
    <span>70%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%;">
    <span>80%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%;">
    <span>90%</span>
  </div>
</div>

＆＃13;

如果您还想使用其他.bg-*类，则必须将以下内容添加到CSS中：

.bg-primary {
    border-color:rgb(0, 123, 255);!important;
}
.bg-secondary {
    border-color:rgb(134, 142, 150)!important;
}
.bg-success {
    border-color:rgb(40, 167, 69)!important;
}
.bg-danger {
    border-color:rgb(220, 53, 69)!important;
}
.bg-warning {
    border-color:rgb(255, 193, 7)!important;
}
.bg-info {
    border-color:rgb(23, 162, 184)!important;
}
.bg-light {
    border-color:rgb(248, 249, 250)!important;
}
.bg-dark {
    border-color:rgb(52, 58, 64)!important;
}
.bg-white {
    border-color:rgb(255, 255, 255)!important;
}

如何在伪类上使用父背景颜色

1 个答案: