做购物网站赚钱吗,etherna 简洁商业企业wordpress,WordPress域名相关主题,食品加工设备建站方案首先在全局css样式中增加一个 dark 模式即可#xff0c;主要就是filter这个属性#xff0c; invert(1);则表示100%完全反转样式#xff0c;通俗点就是颠倒黑白#xff0c;白的让它变成黑的#xff0c;黑的让它变成白的。 css中的filter函数总结 filter:invert(1);数值范围…首先在全局css样式中增加一个 dark 模式即可主要就是filter这个属性 invert(1);则表示100%完全反转样式通俗点就是颠倒黑白白的让它变成黑的黑的让它变成白的。 css中的filter函数总结 filter:invert(1);数值范围0-1,一般用来调整图片边框的渲染 filter:grayscale(1);调整元素的灰度值数值范围0-1 filter:blur(10px); 调整元素的模糊程度单位像素px filter:sepia(0.5);用来调整元素的褐色程度,数值范围0-1 filter:saturate(0.2);用来调整元素的饱和度 数值范围0-1 filter:opacity(0.2);调整元素的不透明的数值范围0-1 filter:brightness(0.2);调整元素的亮度数值范围0-1 filter:contrast(0.2);调整元素的对比度数值范围0-1 filter:hue-rotate(90deg);色相旋转取值为角度值单位deg filter:invert(1);将元素的颜色反转数值范围0-1 light dark 代码描述 templatediv classabout :class{dark:msg}h1This is an about page/h1img src../assets/logo.png altbutton clickfundark/button/div /templatescript export default {components: {},props: {},data:()({msg:false}),watch: {},computed: {},methods: {fun(){this.msg !this.msg;}},created() {},mounted() {} }; /script style langless.about{display: flex;flex-direction: column;background-color: aliceblue;justify-content: center;align-items: center;// 切换黑夜模式时添加过渡动画// transition: color .6s, background-color .6s; // 无效?transition: all .6s; // 有效img{width: 100px;}.dark{filter: invert(1);img{filter: invert(1);}}} /style 思路 1、增加全局css样式 首先在全局css样式中增加一个 dark 模式即可主要就是filter这个属性 invert(1);则表示100%完全反转样式说人话就是颠倒黑白白的让它变成黑的黑的让它变成白的。 2、通过一个按钮button或者div绑定一个切换模式的点击事件。