修改网页中被选中文字样式(如背景颜色)的方法
现在大家在浏览器网站的时候,会发现越来越多的网站出现了这么一个效果,就是鼠标选中页面中文字的时候,被选中的文字体现出来的不是传统的蓝底白字还是其他颜色,如拉勾网中文字被选中的效果:
说实话,这个效果实际的用处并不是太大,有没有均不会对网站的用户体验造成太大影响,但如果合理利用,将被选中文字的样式(如背景颜色等)设置成和网站主色调相似的颜色,会显得页面更舒服一些。好吧,废话不多说,怎么实现呢?很简单,利用css3中提供的::selection伪类选择器即可。
演示代码如下:
<style>
h1::selection{
background: greyellowgreenen;
color: white;
}
h1::-moz-selection{
background: yellowgreen;
color: white;
}
</style>
<h1>后盾网 人人做后盾(效果分享:孙琪峥)</h1>
实际效果演示请猛戳这里:效果传送门
注意:经实际测试,ie、谷歌、斯巴达等浏览器就能直接识别,火狐浏览器需要加-moz-的专属前缀。
【本文来自 孙琪峥博客 http://www.sunqizheng.com/,想获取更好的页面浏览效果或者有任何问题请进入博客,同时也可在博主评论区进行留言,让博主为大家答疑解惑~】