html – 翻转时使图像变暗

HTML 前端之家
前端之家收集整理的这篇文章主要介绍了html – 翻转时使图像变暗，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个需要在翻滚时变暗的图像列表.我真的很乐意这样做,没有臃肿的CSS翻转技术,因为任何时候花在Photoshop上都会让我很开心.我有一部分路在那里,但出了点问题.这是现场：

http://daveywhitney.com/dark/

码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <title>Darken</title>
  6. <style type="text/css">
  7. #topnav {
  8.     float:left;
  9.     margin:22px 0 0 50px;
  10.     list-style:none;
  11. }
  12. .kitchy {
  13.     background-color:#000000;
  14.     width:112px;
  15.     height:203px;
  16. }
  17.  
  18. #topnav  a:hover{
  19.     opacity:.6;
  20. }
  21.  
  22. #topnav  li {
  23.     display:inline;
  24. }
  25. </style>
  26. </head>
  27.  
  28. <body>
  29. <ul id="topnav">
  30.             <li class="kitchy"><a href="#"><img src="img/kitch.jpg" /></a></li>
  31.             <li><img src="img/deck_small.jpg" /></li>
  32.             <li><img src="img/door_small.jpg" /></li>
  33.             <li><img src="img/lumber_small.jpg" /></li>
  34.             <li><img src="img/tools_small.jpg" /></li>
  35.             <li><img src="img/paint_small.jpg" /></li>
  36.         </ul>
  37. </body>
  38.  
  39. </html>

解决方法

这怎么样：

JSFiddle

我改变了什么：

< UL>和< li>到< div>.为所有菜单项添加了kitchy类,

改变了这个CSS：

  1. #topnav {
  2.     float:left;
  3.     margin:22px 0 0 50px;
  4.     list-style:none;
  5. }
  6. .kitchy {
  7.     background: #000;
  8.     width:112px;
  9.     height:103px;
  10.     float:left;
  11.     margin:5px; /*Optional*/
  12. }
  13.  
  14. #topnav  a:hover{
  15.     opacity:.5;
  16. }

猜你在找的HTML相关文章

elasticsearch扩展ik分词器词库
操作步骤 1、进入elasticsearch的plugin，进入ik。进入config。 2、在config下面建立以.di...
echarts中legend如何换行
lengend data数据中若存在&#39;&#39;，则表示换行，用&#39;&#39;切割。
Echart常用效果（一）
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { t...
freemarker中js里面取字符串，换行导致报错的解决办法
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var d...
Freemarker + xml 实现Java导出word
前言 最近做了一个调查问卷导出的功能，需求是将维护的题目，答案，导出成word，参考了几种...
【前端JSP思考】JSP中#{},${}和%{}的区别
JSP中#{},${}和%{}的区别： # #{}：对语句进行预编译，此语句解析的是占位符?，可以防止SQ...
【前端HTML】常用标签及属性
对于很多人来说，用HTML标签都是熟能生巧，而不清楚为什么是那样的标签，所以我在这列了一...
[前端]GOFLY项目-响应式登录页的设计和实现
登录界面如果要实现响应式 , 需要注意宽度的设置和media query的使用 宽度一般都是按百分比...
[前端] 设定为disabled的表单域值不能被提交
表单中的某个表单域被设定为disabled，则该表单域的值就不会被提交。 但是我们需要提交这个...
[前端] 代码中执行绑定元素的指定事件trigger方法
前面业务里有个搜索功能 , 入口比较深 , 现在想要把入口挪到有公共header的地方 , 在不想完...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作