如何让一段hr透明

Question

我目前正在基于此 bootstrap theme (https://blackrockdigital.github.io/startbootstrap-freelancer/) 设计一个网站。我喜欢他对 hr 样式所做的处理（请参阅下面的代码），但我真的想在非纯色背景（即背景图像）上使用它。

The problem with this is that when changing the star icon background-color property to transparent (i.e. not the same colour as the background), the hr line still remains beneath.

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 伪元素创建两条水平线，在星形的两侧.

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;
}

<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>

Answer 2

将伪元素 :after 更改为 :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" />

示例输出

希望对您有所帮助！

如何让一段hr透明

How to make a section of hr transparent

css

transparent

styling