讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > html教程 > 正文

css鼠标滑过/指向图片变色变暗变亮

php中文网
发布： 2016-06-01 09:53:04
原创
4980人浏览过

实例代码如下：

<style>
*{margin:0;padding:0;list-style:none;}
img{border:1px solid #ccc}
.info li { padding:5px;width:144px;float:left}
.info li .img { padding:5px; border:1px solid #CBCBCB;display:block;}
.info li .img:link,.info li .img:visited {border:1px solid #CBCBCB;}
.info li .img:hover{border:1px solid #CBCBCB;background:#f0f0f0;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
</style>
</head>

<body>
<div class="info">
<ul>
<li><a href="#" class="img" >@@##@@</a></li>
<li><a href="#" class="img" >@@##@@</a></li>
<li><a href="#" class="img" >@@##@@</a></li>
</ul>
</div>
登录后复制

大家可以参考 css3 opacity 属性

CSS3鼠标滑过图片产生渐变色覆盖特效
CSS3鼠标滑过图片产生渐变色覆盖特效

CSS3鼠标滑过图片产生渐变色覆盖特效，当我们将鼠标滑过图片时，图片上方会覆盖一层渐变颜色的蒙版，移开图片蒙版又会以渐变的方式消失。

CSS3鼠标滑过图片产生渐变色覆盖特效 10
查看详情 CSS3鼠标滑过图片产生渐变色覆盖特效

css鼠标滑过/指向图片变色变暗变亮css鼠标滑过/指向图片变色变暗变亮css鼠标滑过/指向图片变色变暗变亮

相关标签：
css

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：CSS选择器种类及及其使用介绍 下一篇：css 属性选择器 - 根据html元素的name属性值选择改元素
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
如何向HTML追加新内容_动态插入元素方法【教程】 JavaScript动态插入HTML元素有五种常用方法：一、appendChild()在父元素末尾追加单个节点；二、insertAdjacentHTML()在指定位置插入HTML字符串；三、innerHTML+=拼接追加但会丢失事件；四、DocumentFragment优化批量插入性能；五、before()/after()在参考元素前后插入节点或字符串。
2025-12-20 14:02:42
611
如何套用html_套用现有HTML模板或框架【模板】 快速构建网页可套用HTML模板，操作路径包括：一、下载解压模板并确认文件结构；二、修改HTML文本内容；三、替换图片资源及路径；四、引入外部CSS/JS框架；五、新建custom.css自定义样式。
2025-12-20 14:00:02
482
ai格式如何转html_将AI设计文件转换为HTML页面流程【转换】 可将AI设计稿转为HTML页面：一、导出SVG嵌入HTML；二、用Anima等工具生成HTML+CSS；三、手动重绘并编写代码。
2025-12-20 13:50:03
711
html如何保存框架集_保存HTML框架集页面结构【结构】 应分别保存框架集主文件与各框架页面，使用HTML4.01FramesetDOCTYPE，确保所有文件同目录且路径一致，禁用内联内容并验证结构有效性。
2025-12-20 12:59:02
175
html5禁用缓存技巧_meta标签与HTTP头设置【详解】 需从客户端与服务端协同禁用缓存：一、HTML中用meta标签仅禁HTML缓存；二、Apache通过.htaccess设Cache-Control等头；三、Nginx在server/location块用add_header；四、PHP用header()函数；五、JS通过URL加时间戳参数绕过缓存。
2025-12-20 12:43:21
248
如何输入html_输入并编辑HTML代码的基本操作【操作】 可在浏览器开发者工具、文本编辑器、在线HTML编辑器或CMS源码模式中直接输入编辑HTML；前者用于临时调试，后三者支持保存与持久化修改。
2025-12-20 12:38:02
198
如何用html做朋友圈_用HTML模拟微信朋友圈界面【微信】 需用HTML构建静态布局并结合CSS实现微信朋友圈视觉效果与交互结构，包含基础结构法、Flex布局法、伪元素装饰法、数据驱动法及无障碍增强法五种方法。
2025-12-20 11:48:08
228
ides中怎么运行html_idea中运行html步骤【指南】 首先确认项目中存在HTML文件，如index.html，并确保已添加基本HTML结构。接着通过File→Settings→Plugins安装前端开发相关插件并重启IDEA。然后右键HTML文件选择OpeninBrowser，在默认或指定浏览器中预览页面。若需本地服务器环境，可安装Node.js后使用http-server命令启动服务，访问localhost:8080查看效果。最后，IntelliJIDEAUltimate用户可通过Run→EditConfigurations配置JavaScrip
2025-12-20 11:43:02
167
html中加入php怎么运行_html加入php并运行方法【教程】 要使HTML文件执行PHP代码，需配置服务器解析PHP。一、Apache服务器可通过.htaccess添加AddTypeapplication/x-httpd-php.html.htm，使HTML文件支持PHP语法；二、推荐将HTML文件重命名为.php，在其中嵌入PHP代码如，由服务器直接解析；三、使用在.php文件中引入外部PHP脚本，实现功能复用；四、Nginx服务器需修改配置文件，将location~.php$改为location~\.(php|html)$，并包含FastCGI配置，重
2025-12-20 11:37:45
138
html5如何改成flash_HTML5替代Flash方案与迁移技巧【方法】 需用HTML5替代Flash：一、Canvas/SVG重写动画图形；二、Video/Audio元素+WebAudioAPI替代音视频；三、WebSocket/Fetch重构通信；四、Emscripten将AS3转WebAssembly；五、Ruffle模拟器运行遗留SWF。
2025-12-20 11:18:51
735
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部