如何制作一段透明的
问题描述：
我目前正在根据此设计一个网站bootstrap theme (https://blackrockdigital.github.io/startbootstrap-freelancer/)。我喜欢他用小时造型完成的任务（请参见下面的代码），但我真的希望将其用于非纯色背景（即背景图像）。如何制作一段透明的
问题是，当将星形图标
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;
}
答
我不认为你可以做你所要求的一个单一的元素。我建议创建一个内部为span的div作为图标，然后使用: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>
答
变化伪元件: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" />
样本输出
希望第是有帮助的！
所有的CSS都在你的示例链接中。只需使用开发工具来检查HR并复制CSS。你在这里发布的是*不是*所有与明星规则相关的CSS。 – Scott