今天介绍一个CSS小应用,当我们全选页面后,设计师觉得默认的背景色不好看,需要我们去调整下,改变背景色以及文字颜色。可能这个文字说明,大家有点不明白,我们先看张图:
当我们打开Web前端之家网站的时候,全选【快捷键CTRL+A】,就可以看到上面图的效果。
然后发现背景色可能不是我们需要的,那么如何去修改成设计师喜欢的颜色呢?
解决方法
我们采用最简单的方法,用CSS去实现,分两种情况。
1、只是修改部分背景
比如我只要修改一个段落的背景,HTML代码:
<p class="box">只是修改部分背景<p>
那么什么可以使用这样的CSS代码:
.box::-moz-selection{
background: #000;
color:#fff;
}
.box::selection{
background: #000;
color:#fff;
}
这样的话,我们就把这部分的背景色改成黑色,文字改成白色了。是不是很简单。
2、修改网页全局的背景
上面我们提到只是修改网页部分的背景,那么想修改所有的呢?如何搞?
其实也是很简单,我们只要对body进行CSS设定就好了。代码如下:
body ::-moz-selection{
background: #000;
color:#fff;
}
body ::selection{
background: #000;
color:#fff;
}
大家可以预览下,就知道结果了。
好啦,本次分享就这么多了,希望大家能帮助到大家。