Comment faire une section de hr transparent

Question

Je suis actuellement la conception d'un site Web basé sur ce bootstrap theme (https://blackrockdigital.github.io/startbootstrap-freelancer/). J'aime ce qu'il a fait avec le style hr (voir le code ci-dessous), mais je veux vraiment l'utiliser sur un fond qui n'est pas une couleur unie, c'est-à-dire une image de fond.

Le problème est que lorsque vous changez l'étoile icône background-color propriété à la transparence (à savoir pas la même couleur que l'arrière-plan), la ligne d'heure reste en dessous.

Example image. Si quelqu'un peut trouver un moyen simple d'atteindre le même effet sur un fond non-simple, je serais vraiment reconnaissant!

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

Je ne pense pas que vous puissiez faire ce que vous demandez avec un seul élément. Je suggère de créer un div avec un span à l'intérieur de l'icône, puis en utilisant les pseudo-éléments :before et :after pour créer deux lignes horizontales, de chaque côté de l'étoile.

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

élément pseudo changement :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" /> 

Exemple de sortie

e Hope est utile!