如何製作一段透明的

我目前正在根據此設計一個網站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; 
}

來源

2017-10-16 Chris

所有的CSS都在你的示例鏈接中。只需使用開發工具來檢查HR並複製CSS。你在這裏發佈的是*不是*所有與明星規則相關的CSS。 – Scott

我不認爲你可以做你所要求的一個單一的元素。我建議創建一個內部爲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>

來源

2017-10-16 01:35:50 fubar

變化僞元件: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" />

樣本輸出

希望第是有幫助的！

來源

2017-10-16 02:25:42

如何製作一段透明的

回答

相關問題