So machen Sie einen Abschnitt der Personalabteilung transparent ⇐ CSS

[Guest]

Ich entwerfe derzeit eine Website basierend auf diesem Bootstrap-Thema (https://blackrockdigital.github.io/star ... reelancer/). Mir gefällt, was er mit dem HR-Styling gemacht hat (siehe Code unten), aber ich möchte es unbedingt vor einem Hintergrund verwenden, der nicht einfarbig ist, also vor einem Hintergrundbild.


Das Problem dabei ist, dass beim Ändern der Eigenschaft Hintergrundfarbe des Sternsymbols in transparent (d. h. nicht die gleiche Farbe wie im Hintergrund) bleibt die Stundenlinie weiterhin darunter.


Beispielbild. Wenn jemand eine einfache Möglichkeit finden könnte, den gleichen Effekt vor einem nicht einfarbigen Hintergrund zu erzielen, wäre ich wirklich dankbar!

Code: Select all

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