如何使hr的一部分透明

Question

我目前正在设计一个基于此bootstrap theme (https://blackrockdigital.github.io/startbootstrap-freelancer/)的网站。我喜欢他用hr造型完成的工作（参见下面的代码），但我真的想用它来处理不是普通颜色的背景，即背景图像。

  

问题在于，当将星形图标background-color属性更改为透明（即与背景颜色不同）时，hr线仍然保持在下方。

Example image。如果有人能想出一个简单的方法来达到对非普通背景的相同效果，我真的很感激！

hr.star-primary {
  max-width: 250px;
  margin: 25px auto 30px;
  padding: 0;
  text-align: center;
  border: none;
  border-top: solid 5px; 
  border-color: #2C3E50; 
}

hr.star-primary:after {
  font-family: FontAwesome;
  font-size: 2em;
  position: relative;
  top: -.8em;
  display: inline-block;
  padding: 0 0.25em;
  content: '\f005'; 
  color: #2C3E50;
  background-color: white; 
}

Answer 1

我认为你不能用单个元素做你所要求的事情。我建议在图标内部创建一个div span，然后使用:before和:after伪元素创建两条水平线，在明星的任一侧

＆＃13;

＆＃13;

body {
  background-color: #f00;
}

.hr {
  overflow: hidden;
  position: relative;
  text-align: center;
}

.hr::before, .hr::after {
  background-color: white;
  content: '';
  display: inline-block;
  height: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.hr::before {
  left: calc(50% + 30px);
}

.hr::after {
  right: calc(50% + 30px);
}

.hr .icon {
  background-color: transparent; 
  color: white;
  display: inline-block;
  font-family: FontAwesome;
  font-size: 2em;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="hr">
  <span class="icon fa fa-star"></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Change pseudo element :after to :before

<link rel="stylesheet" href="https://blackrockdigital.github.io/startbootstrap-freelancer/vendor/bootstrap/css/bootstrap.min.css" type="text/css"/>
<link href="https://blackrockdigital.github.io/startbootstrap-freelancer/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<style>
hr.star-primary {  
    max-width: 250px;
    margin: 25px auto 30px;
    padding: 0;
    text-align: center;
    border: none;
    border-top: #2C3E50 solid 5px;
    color: #2C3E50
}

hr.star-primary:before {
    font-family: FontAwesome;
    font-size: 2em;
    position: relative;
    top: -.8em;
    display: inline-block;
    padding: 0 .25em;
    content: '\f005';
    color: #2C3E50
}
</style>

<hr class="star-primary" />

Sample Output

希望这有帮助！