怎么设置鼠标放在特定图片上图片亮度变化

 时间:2026-04-23 13:42:10

1、打开编辑器,新建一个HTML文档,并且设立基本架构。

怎么设置鼠标放在特定图片上图片亮度变化

2、用img标签把图片加进来。

怎么设置鼠标放在特定图片上图片亮度变化

怎么设置鼠标放在特定图片上图片亮度变化

3、创建CSS文件,并且与HTML文档相关联。

怎么设置鼠标放在特定图片上图片亮度变化

4、img:hover {

    opacity: 0.5;

}

我们可以利用透明度来进行调整,移动过去以后就减弱,这样亮度就有变化。

怎么设置鼠标放在特定图片上图片亮度变化

怎么设置鼠标放在特定图片上图片亮度变化

怎么设置鼠标放在特定图片上图片亮度变化

5、但是透明度最多只能为1,超过就没有任何效果了。

怎么设置鼠标放在特定图片上图片亮度变化

6、img{

    opacity: 0.6;

}


img:hover {

    opacity: 1;

}

但是我们也可以先设置稍微有点透明,然后再设置恢复正常,这样也是可以的。

怎么设置鼠标放在特定图片上图片亮度变化

怎么设置鼠标放在特定图片上图片亮度变化

怎么设置鼠标放在特定图片上图片亮度变化

  • 如何在HTML中插入图片
  • html怎么设置文字居中对齐
  • html怎么让一行文字一部分靠左显示,另外一部分靠右显示~~
  • css中如何给多张图片设置不同的样式
  • id选择器的使用
  • 热门搜索
    攻略奇怪的世界(总受np)(h) ck手表怎么样 北京旅游攻略 tplink无线路由器怎么设置 减肥大肚子 雾凇岛旅游攻略 减肥吃什么瘦得快 洛克王国攻略 怎么换桌面壁纸 鼓浪屿怎么去