«

利用css3的属性来控制网页中被选中的文字颜色和背景色

admin 发布于 阅读:4351 代码人生


浏览器中默认的选中的文字颜色为白色,背景色为蓝色。并且在火狐和google两个不同的内核浏览器下效果也不一样,google浏览器的两段文字之间的空格也会添加上背景色,火狐的就不会,效果如下:

利用css3的属性来控制网页中被选中的文字颜色和背景色

图一 是google浏览器下的效果截图

利用css3的属性来控制网页中被选中的文字颜色和背景色

图二 是火狐浏览器下的效果截图

下面两图就是修改后的效果:

利用css3的属性来控制网页中被选中的文字颜色和背景色

图一 是火狐浏览器下的效果

利用css3的属性来控制网页中被选中的文字颜色和背景色

图二 是google浏览器下的效果

下面就来说说如何利用css3的属性来控制网页中被选中的文字颜色和背景色:

通过查阅资料得知,设置[code]body ::selection[/code]的css属性可以控制,我博客的效果设置代码如下:

[code] body ::selection {
    color:#12C141;
    background-color:#060606;
    text-shadow:none;
}
body ::-moz-selection {
    color:#12C141;
    background-color:#060606;
    text-shadow:none;
}
 [/code]

其中的颜色和背景色可以更具自己的喜好来设置。


关于代码的几点说明:

(1)注意这里是两个冒号,不同于一般伪类的单冒号,此属性应用的css3属性;

(2)由于本站文字采用了[code]text-shadow:none;[/code]属性,而在文字选中后阴影会导致文字模糊,所以这里将阴影去掉,如果你的博客没有使用可以不用添加

(3)ie6,7,8版本不支持此属性,ie9,10未测试;

经过测试,我的总结:

(1)IE9是支持此通过css定制选中文字的背景色的;IE7/IE8/IE9兼容性视图,都是不支持此效果的;

(2)关于选中的效果:IE9和FireFox都是存在行间距,而Chrome为整块选中状态,无行间距;

(3)上述背景色设置,使用[code]background-color[/code]或[code]background[/code],都是有效的


编程 代码 google 分享 css 火狐


扫描二维码,在手机上阅读

推荐阅读: