51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

CSS应用:全选页面后,改变背景色以及文字颜色

500.jpg

今天介绍一个CSS小应用,当我们全选页面后,设计师觉得默认的背景色不好看,需要我们去调整下,改变背景色以及文字颜色。可能这个文字说明,大家有点不明白,我们先看张图:

image.png

当我们打开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;
}

大家可以预览下,就知道结果了。

好啦,本次分享就这么多了,希望大家能帮助到大家。

赞(0)
未经允许不得转载:工具盒子 » CSS应用:全选页面后,改变背景色以及文字颜色