此示例使用 HTML + Canvas 實現滑動拼圖驗證碼。Canvas繪制帶隨機缺口的背景，獨立滑塊按鈕監聽滑鼠/觸摸拖拽，實時將滑塊位置映射到Ca...
css高亮效果，CSS 創建不同高亮效果具體方法及例子
雲端運算與程式碼
2023年05月11日 09:37 1.9K+
訪客
CSS 可以為 <mark> 元素創建各種不同的高亮效果，具體方法如下：
1. 使用默認的高亮樣式。瀏覽器默認會給 <mark> 元素添加黃色的背景色，可以直接使用，例如：
```html <p> 這是一段需要高亮的文本，<mark>這裏面的文本被黃色高亮了</mark>，這裏又是正常的文本。 </p > ```
2. 使用 CSS 樣式修改高亮樣式。可以通過樣式修改 <mark> 元素的背景色和文本顏色，實現自定義高亮效果，例如：
```html
<p>
這是一段需要高亮的文本，<mark class="highlight">這裏面的文本被自定義高亮了</mark>，這裏又是正常的文本。
</p >
<style>
.highlight {
background-color: skyblue;
color: white;
}
</style>
```上述代碼會將 <mark> 元素的背景色設為淡藍色，文本顏色設為白色，實現了自定義高亮效果。根據需要，您可以使用其他顏色。
3. 使用偽元素實現高亮效果。如果您需要為文本的某個部分添加高亮效果，但不希望改變 <mark> 元素的默認樣式，可以使用偽元素 ::before 或 ::after 生成高亮效果，例如：
```html
<p>
這是一段需要高亮的文本，<span class="highlight">這裏面的文本被自定義高亮了</span>，這裏又是正常的文本。
</p >
<style>
.highlight {
position: relative;
}
.highlight::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightgreen;
opacity: 0.5;
z-index: -1;
}
</style>
```上述代碼會將 <span> 元素的文本區域覆蓋上高亮色，實現了高亮效果。通過調整 opacity（透明度），可以調整高亮效果的濃度。
相關文章
