編輯跨度背景顏色的高度

Question

是否可以在我的跨度中編輯背景顏色的高度？

HTML

<span class="highlight">Some highlighted text</span> 

CSS

.highlight{ 
font-family: 'Roboto', sans-serif; 
    font-weight: 300; 
    font-size: 1.5em; 
     background-color: #4db6ac; 
     line-height: 2em; 
    } 

我想要做的就是爲亮點是1.8em。我不知道如何實現這一點，而不是太繁瑣（即大量的div）。

Answer 1

您可以使用具有透明頂部和底部顏色的垂直線性漸變（在示例中我使用了紅色）。

因爲line-height元素的高度爲2em，所以1.8em爲90％。用兩個高度爲5％的透明條（在演示中爲紅色）創建一個漸變。 90％的其餘部分將成爲高光顏色。

.highlight { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 300; 
 
    font-size: 1.5em; 
 
    background: linear-gradient(to bottom, red 5%, #4db6ac 5%, #4db6ac 95%, red 95%); 
 
    line-height: 2em; 
 
}

<span class="highlight">Some highlighted text</span>

Answer 2

通過設置顯示屬性內聯塊的背景大小將變得等於線高度不添加任何的div。希望這對你有用！

.highlight{ 
    display:inline-block; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 300; 
    font-size: 1.5em; 
    background-color: #4db6ac; 
    line-height: 2em; 
    } 

Answer 3

將顯示屬性添加爲行內塊，您的背景大小將變得等於行高而不添加任何div。這會對你有用！

.highlight{ 
display:inline-block; 
font-family: 'Roboto', sans-serif; 
font-weight: 300; 
font-size: 1.5em; 
background-color: #4db6ac; 
line-height: 2em; 

}