本篇文章小编给大家分享一下Html页面支持暗黑模式实现代码，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。 准备 其实，我们只是需要使用到css中的prefers-color-scheme 媒体查询。 no-preference 表示用户未制定操作系统主题。作为布尔值时，为false 输出。 light 表示用户的操作系统是浅色主题。 dark 表示用户的操作系统是深色主题。 说明 此方法只是一个简单demo，可以使用该方法拓展出其他实现方式。 prefers-color-scheme说明 DEMO地址 HTML 页面适应黑暗模式 测试文字 CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.back {background: white; color: #555;text-align: center} @media (prefers-color-scheme: dark) { .back {background: #333; color: white;} .models {border:solid 1px #00ff00} } @media (prefers-color-scheme: light) { .back {background: white; color: #555;} .models {border:solid 1px #2b85e4} } |
from:https://blog.csdn.net/weixin_39610678/article/details/117835878
View Details原始图片 滤镜调节后效果： 代码中替换图片即可：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="./tianditu.jpg" id="tiimg" style="width: 50%;"/> <br> <span>高斯模糊：blur(<span id="showblur"></span>px)</span><input id="gaosi" type="range" value="0" onchange="document.getElementById('showblur').innerHTML=value" /> <br> <span>黑白效果：grayscale(<span id="showgrayscale"></span>%)</span><input id="heiba" type="range" value="0" onchange="document.getElementById('showgrayscale').innerHTML=value" /> <br> <span>怀旧效果：sepia(<span id="showsepia"></span>%)</span><input id="huaij" type="range" value="0" onchange="document.getElementById('showsepia').innerHTML=value"/> <br> <span>反色效果：invert(<span id="showinvert"></span>%)</span><input id="fansx" type="range" value="0" onchange="document.getElementById('showinvert').innerHTML=value"/> <br> <span>透明效果：opacity(<span id="showopacity"></span>%)</span><input id="toum" type="range" value="0" onchange="document.getElementById('showopacity').innerHTML=value"/> <br> <span>图饱和度：saturate(<span id="showsaturate"></span>%)</span><input id="baof" type="range" value="0" onchange="document.getElementById('showsaturate').innerHTML=value"/> <br> <span>色相：hue-rotate(<span id="showhuerotate"></span>deg)</span><input id="sex" type="range" value="0" onchange="document.getElementById('showhuerotate').innerHTML=value" max="360"/> <script> var tup = document.getElementById("tiimg"); var blur=0;var hbxg=0;var hjxg=0;var fans=0;var tmxg=0;var baohd=0;var sex=0; // 高斯模糊 document.getElementById("gaosi").addEventListener("input",function() { blur=this.value; flisd(); }); //黑白效果 document.getElementById("heiba").addEventListener("input",function() { hbxg=this.value; flisd(); }); //怀旧效果 document.getElementById("huaij").addEventListener("input",function() { hjxg=this.value; flisd(); }); //反色效果 document.getElementById("fansx").addEventListener("input",function() { fans=this.value; flisd(); }); //透明效果 document.getElementById("toum").addEventListener("input",function() { tmxg=this.value; flisd(); }); //饱和效果 document.getElementById("baof").addEventListener("input",function() { baohd=this.value; flisd(); }); //色相 document.getElementById("sex").addEventListener("input",function() { sex=this.value; flisd(); }); function flisd(){ if(baohd==0){baohd=2;} tup.style.filter="blur("+blur+"px) grayscale("+hbxg+"%) sepia("+hjxg+"%) invert("+fans+"%) opacity("+(100-tmxg)+"%) saturate("+baohd*50+"%) hue-rotate("+sex+"deg)"; } </script> </body> </html> |
更多属性请查看官方文档尝试： from:https://blog.csdn.net/josiecici/article/details/127629212
View Detailssass/scss或是less，都可以看作为一种基于css之上的高级语言，其目的是使得css开发更灵活和更强大，sass的功能比less强大,基本可以说是一种真正的编程语言了，less则相对清晰明了,易于上手,对编译环境要求比较宽松，在实际开发中更倾向于选择less。但如果认真深入scss之后还是建议切换到scss，因为更加强大，更好用。
View Details移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小:
使用css通过@media 判断像素比去切换不同照片如下 再通过css预处理器封装为一个公用方法 方便使用
px
常用的单位，即像素pixel缩写，但通常被当做绝对单位，但严格说并不是，因为官方考虑到观看不同设备显示屏时，使网页设计出的某一图形的显示大小在人眼中的观看效果差不多，而定义的一个相对值，即人以一臂之遥观看96DPI的显示屏的角度，大概就是利用透视的近大远小原理，照顾不同设备的最终观看效果。
比如某网页图形设置为一固定的px值，在手机浏览器上显示是用直尺测大概1cm，但是同样在不缩放情况下，电脑显示屏测量可能就是1.5cm左右，如果是打印机打印出来的话也许就是2cm左右了。
em
常用的相对单位，前面的数字是比例，即相对于父元素的字体尺寸的比例，比如父元素字体16px，子元素设置1em，也可以理解为100%，那么子元素也是16px，同样，2em就是200%，32px，也可以是小数0.2em，1.5em等等。
rem
类似于em，但rem是相对于根元素html，例如用css标签选择器给html标签设置字体尺寸font-size大小为20px，那么文档中的每个1rem就代表20px，1.5em代表30px，以此类推。
in，cm，mm
这些虽然是生活中的物体测量单位，但网页的1cm尺寸的元素显示到显示器上，用直尺测量通常不是标准1cm，因为css已经默认设置1in=96px，前面也讲过px会因显示屏而不同，因此最终尺寸也不是绝对的，其他也差不多，所以这类尺寸很少用。
问题 最近遇到一个需求，需要实现文字的描边效果，如下图 解决方法一 首先想到去看CSS3有没有什么属性可以实现，后来被我找到了text-stroke 该属性是一个复合属性，可以设置文字宽度和文字描边颜色 该属性使用很简单：text-stroke:1px#f00;（1px是文字宽度，#ff是文字描边颜色） 本以为该属性的兼容性会及时止住我微微上扬的嘴角，随后逐渐凝固 但出乎意料的是大多浏览器已经开始支持该属性，只需要加上前缀-webkit-即可 解决方法二（推荐） 偶然间发现一种即使不用text-stroke属性也能够实现文字描边的方法—— text-shadow 并且text-shadow属性的兼容性更好，也不用加前缀-webkit- css 模拟文字描边效果2
|
1 |
p{ text-shadow: -1px -1px 0 #4f4d57, 1px -1px 0 #4f4d57, -1px 1px 0 #4f4d57, 1px 1px 0 #4f4d57, 0px 2px 2px rgba(0,0,0,0.6); font-size: 15px; color: #f2f2f2; font-family:"微软雅黑"; } |
from：https://www.html.cn/qa/css3/112869263329100.html
View Details