×

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

作者:Terry2022.10.13来源:Web前端之家浏览:1098评论:0
关键词: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;
}

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

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

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/htmlbg20221013.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • jenny

    VUE的总结的不错啊,收藏了。下次搞点React的啊...

  • jenny

    win7最经典,想当初win8出来后都没它好用,怀恋经典。。。...

  • Terry

    谢谢提醒,插件已经修复。...

  • 访客

    士大夫士大夫...

  • 访客

    用這甚麼顏色...

  • fg123

    提示什么报错信息?...

  • 访客

    为什么第一步点击提交后弹出框点击确认后没有反应?...

  • fati

    刚好遇到setState的问题,感谢分享!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2023 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2