改变文字选中时背景颜色

最新推荐文章于 2023-06-12 13:55:46 发布

erdouzhang

最新推荐文章于 2023-06-12 13:55:46 发布

阅读量1.8k

点赞数 1

分类专栏： css3 html5+css3

本文链接：https://blog.csdn.net/erdouzhang/article/details/71597581

版权

css3 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

html5+css3

20 篇文章 0 订阅

订阅专栏

在线演示

这里写图片描述

html:

<body>
    <h1>Woman</h1>
    <p>Every woman is ... You are worth it! </p>
</body>

css：

<style>
    body {
        background:url(images/09.png) no-repeat 50% 0;
        margin: 10% 20%;
        color: #fff;
        text-shadow: 1px 2px 0 rgba(0,0,0,.75); 
        background-attachment: fixed;/* 背景图片固定，不随文字的滚动而滚动 */        
    }
    h1 {
        text-transform: uppercase; /*英文字母全部大写*/
        border-bottom: 2px solid #fff;
        padding-bottom: 50px;
    }
    p {
        font-size: 20px;
    }
    ::selection {  /*设置选中区域文字背景变化*/
        text-shadow: none;
        color: #fff;
        background-color: #e74c3c;/*为选中文字设置背景颜色*/
    }
</style>

解析：
通过selection伪元素来实现反选样式。
只能向::selection应用少量的CSS属性，如color、background、cursor、及outline等。

erdouzhang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
改变文字选中时背景颜色

在线演示html:<body> <h1>Woman</h1> <p>Every woman is ... You are worth it! </p></body>css：<style> body { background:url(images/09.png) no-repeat 50% 0; margin: 10% 20%;
复制链接

扫一扫

专栏目录