大家都知道，我们在PC、Mac上，可以通过设置以下CSS代码来实现浏览器中选中区域的背景颜色变化:

::selection {
    background: rgba(231,105,105,0.7);
}

我们在手机上的浏览器如果长按文字，图片，链接，也会出现被选中的效果，如果我们想修改选中的颜色我们应该怎么做呢？Safari率先提供了CSS属性：-webkit-tap-highlight-color来解决这个问题（了解详情），Chrome也支持这个属性。

我们来看看代码，如何使用：

/* 使用rgba值，来支持半透明效果 */
html {
    -webkit-tap-highlight-color: rgba(201, 224, 253, 0.8);
}

.blueDiv {
    -webkit-tap-highlight-color: rgba(251, 185, 250, 0.9);
}

比如在图片或者链接上，希望不出现被选中的颜色，可以怎么做呢？其实我们可以将属性-webkit-tap-highlight-color的值设置为透明就可以实现，来看代码：

a,img {
    -webkit-tap-highlight-color:transparent;
}

若有描述不准确之处，欢迎指正！

扫码关注w3ctech微信公众号