css3怎样实现低亮度显示

css中可利用filter属性和brightness()函数实现低亮度显示,filter属性用于定义图片元素的可视效果,配合brightness()函数使用可设置元素的明暗样式,语法“元素{filter:brightness(明暗值)}”。

css3怎样实现低亮度显示

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

css3怎样实现低亮度

在css中,想要实现低亮度,可以利用filter属性。

filter 属性定义了元素(通常是css3怎样实现低亮度显示)的可视效果(例如:模糊与饱和度)。

立即学习“前端免费学习笔记(深入)”;

brightness()函数给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。

示例如下:

.img1{    -webkit-filter: brightness(50%); /* Chrome, Safari, Opera */    filter: brightness(50%);}

左面低亮度,右面原亮度:

@@##@@@@##@@

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

输出结果:
css3怎样实现低亮度显示

(学习视频分享:css视频教程)

css3怎样实现低亮度显示29.png

以上就是css3怎样实现低亮度显示的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1623336.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 08:15:36
下一篇 2025年12月24日 08:15:54

相关推荐

  • css3怎样实现带边框的缺角矩形

    方法:1、利用“background:linear-gradient(角度,transparent 缺角大小,颜色 0)”语句,可以给矩形元素设置缺角;2、将小缺角矩形放置在缺角方向相同的大矩形内,即可实现带有边框的缺角矩形。 本教程操作环境:windows10系统、CSS3&&HT…

    2025年12月24日
    000
  • css3怎样实现向左平移消失效果

    方法:1、利用“animation:名称 时间”语句给元素绑定向左平移消失动画;2、利用“@keyframes 名称{100%{transform:translateX(-平移距离);opacity:0;}}”语句实现元素向左平移消失效果。 本教程操作环境:windows10系统、CSS3&…

    2025年12月24日
    000
  • css3怎样实现翻转2次效果

    方法:1、用“@keyframes 名称{100%{transform:rotateY(角度);}}”语句设置元素翻转的动画效果;2、用“元素{animation-iteration-count:2}”语句设置元素动画翻转的次数为2次即可。 本教程操作环境:windows10系统、CSS3&…

    2025年12月24日
    000
  • css3怎样实现三角形带边框效果

    方法:1、利用“border:长度值 solid transparent;border-top:高度值 solid 颜色值”语句,可以设置空元素为三角形样式;2、将小的三角形元素放置在不同颜色的大三角形元素内,就可以实现三角形带边框的效果。 本教程操作环境:windows10系统、CSS3&…

    2025年12月24日
    000
  • css3怎样实现取消动画效果

    css中,可用“animation-play-state”属性取消动画效果,该属性可规定动画的运行暂停效果,属性的值为“paused”时动画会暂停,也就是取消动画效果,语法“元素{animation-play-state:paused}”。 本教程操作环境:windows10系统、CSS3&…

    2025年12月24日
    000
  • css3怎样实现边框凸起

    在css中,可以利用“border-style”属性实现边框凸起样式,该属性用于设置元素边框的样式,当属性的值为“outset”时,可以设置元素边框为凸起,语法为“元素{border-style:outset;}”。 本教程操作环境:windows10系统、CSS3&&HTML5版、…

    2025年12月24日
    000
  • css3中隐藏代码是什么

    代码:1、“display:none”,可使元素不占据原位置隐藏;2、“visibility:hidden”,可使元素占据原位置隐藏;3、“overflow:hidden”,超出元素框时隐藏;4、“opacity:0”,可使元素透明隐藏。 本教程操作环境:windows10系统、CSS3&&…

    2025年12月24日 好文分享
    000
  • 你绝不可错过的 CSS 网格布局 知识详解!

    本篇文章给大家分享一些关于css 网格布局的知识点,带大家详细了解一下 css 网格布局,希望对大家有所帮助! 时至今日,可用于现代 Web 布局的特性非常的多,可能大家最为熟知的还是 Flexbox,都觉得 Flexbox 布局可以一把梭。虽然说 Flexbox 布局已非常强大了,但他始终还是一维…

    2025年12月24日 好文分享
    000
  • css3怎样取消加粗文本样式

    在css中,可以利用“font-weight”属性取消文本的加粗样式,该属性用于设置文本的粗细大小,当属性的值为“normal”时,就可以取消加粗文本样式,语法为“元素{font-weight:normal;}”。 本教程操作环境:windows10系统、CSS3&&HTML5版、D…

    2025年12月24日
    000
  • css3中实现动画效果的属性是什么

    在css中实现动画效果的属性:1、“animation”属性,该属性与“@keyframes”规则配合使用可以给元素设置动画效果;2、“transition”属性,该属性可以给元素设置过度动画效果。 本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑…

    2025年12月24日 好文分享
    000
  • css3定义渐变的语法有哪些

    语法:1、“background:radial-gradient(类型 大小 位置,颜色1,颜色n..)”设置元素径向渐变样式;2、“background:linear-gradient(方向,颜色1,颜色n..)”设置元素线性渐变样式。 本教程操作环境:windows10系统、CSS3&&…

    2025年12月24日 好文分享
    000
  • css3元素的翻转代码是什么

    代码:1、“transform:rotateY(角度)”,可设置元素沿Y轴翻转样式;2、“transform:rotateX(角度)”,可设置元素沿X轴翻转样式;3、“transform:rotateZ(角度)”,可设置元素沿Z轴翻转样式。 本教程操作环境:windows10系统、CSS3&…

    2025年12月24日 好文分享
    000
  • box-shadow是css3新增的属性吗

    “box-shadow”是css3新增的属性。“box-shadow”属性的作用就是给元素框添加一个或者多个阴影,语法为“元素{box-shadow:水平阴影位置 垂直阴影位置 blur spread color inset;}”。 本教程操作环境:windows10系统、CSS3&&amp…

    2025年12月24日
    000
  • css3怎样实现改变宽度的动画效果

    方法:1、利用“元素{animation:名称 时间}”语句给元素绑定动画;2、利用“@keyframes 名称{100%{width:宽度值;}}”语句,设置元素改变宽度的动画动作,实现元素改变宽度的动画效果。 本教程操作环境:windows10系统、CSS3&&HTML5版、De…

    2025年12月24日
    000
  • css3怎样实现div放大

    方法:1、用transform属性和scale()函数放大div,语法为“元素{transform:scale(放大倍数)}”;2、用width和height属性实现放大div效果,语法为“元素{width:宽度;height:高度}”。 本教程操作环境:windows10系统、CSS3&&…

    2025年12月24日
    000
  • css3中float属性的用法是什么

    css中,float属性用于定义元素在哪个方向浮动,语法为“元素{float:value}”;当属性的值为“left”可设置元素向左浮动;当属性的值设置为“right”可设置元素向右浮动;当属性的值设置为“none”可设置元素不浮动。 本教程操作环境:windows10系统、CSS3&&am…

    2025年12月24日
    000
  • css3怎样实现div右侧滑入

    方法:1、利用“div{animation:名称 时间}”语句给div元素绑定滑动动画;2、利用“@keyframes 名称{0%{transform:translateX(滑入距离)}}”语句设置滑动动画的动作,实现div右侧滑入效果。 本教程操作环境:windows10系统、CSS3&&…

    2025年12月24日
    000
  • css3怎样控制旋转时间

    方法:1、利用animation属性和“@keyframes”规则给元素定义一个旋转动画;2、利用“animation-duration”属性设置控制元素的旋转时间,语法为“元素{animation-duration:time;}”。 本教程操作环境:windows10系统、CSS3&&am…

    2025年12月24日
    000
  • css怎样去除标题的样式

    方法:1、用“padding:0;margin:0;”样式去除标题元素内外边距样式;2、用“font-weight:normal;”样式去除标题元素的加粗样式;3、用“font-size:16px;”样式设置标题字体大小为正常大小即可。 本教程操作环境:windows10系统、CSS3&&a…

    2025年12月24日
    000
  • css怎样实现对号效果

    实现方法:1、利用“border-color:颜色;border-style:solid;border-width:0 粗细 粗细 0”语句设置矩形元素相邻的两个边框;2、利用“transform:rotate(角度)”语句将矩形旋转即可。 本教程操作环境:windows10系统、CSS3&…

    好文分享 2025年12月24日
    000

发表回复

登录后才能评论
关注微信