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

2015-12-6 / 0 评论 代码人生 / Mrxn

本文共计 829 字,感谢您的耐心浏览与评论.

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

000112-2015-12-06.jpg

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

000113-2015-12-06.jpg

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

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

000114-2015-12-06.jpg

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

000115-2015-12-06.jpg

图二 是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 火狐

转载:转载请注明原文链接 - 利用css3的属性来控制网页中被选中的文字颜色和背景色


0条回应:“利用css3的属性来控制网页中被选中的文字颜色和背景色”


发表评论

{view_code_no}