css高亮效果，CSS 创建不同高亮效果具体方法及例子
代码
2023年05月11日 09:37
小糯草
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（透明度），可以调整高亮效果的浓度。
专题推荐：
部份内容隐藏请会员登录查看
手机扫一扫，识别二维码，关注本站。
相关文章