欢迎光临
我的个人博客网站

CSS世界–代码实践–图片alt信息呈现

    使用缺省 src 的<img>元素实现滚屏加载效果,但是,就有可能存在这样一个体验问题:如果我们的 JavaScript 加载比较慢,我们的页面就很有可能出现一块一块白色的图片区域,纯白色的,没有任何信息,用户完全不知道这里的内容是什么。
    虽然 alt 属性可以提供描述信息,但由于视觉效果不好,被隐藏掉了。我们可以在图片还没加载时就把 alt 信息呈现出来:
 1 <!DOCTYPE html>  2 <html lang="en">  3   4     <head>  5         <meta charset="UTF-8">  6         <meta name="viewport" content="width=device-width, initial-scale=1.0">  7         <meta http-equiv="X-UA-Compatible" content="ie=edge">  8         <title>CSS世界--代码实践--图片alt信息呈现</title>  9         <style> 10             /* 滚屏加载效果CSS */ 11             /* img { 12                 visibility: hidden; 13             } 14  15             img[src] { 16                 visibility: visible; 17             } */ 18  19             img { 20                 display: inline-block; 21                 width: 180px; 22                 height: 100px; 23                 /* 隐藏Firefox alt文字 */ 24                 color: transparent; 25                 position: relative; 26                 overflow: hidden; 27             } 28  29             img:not([src]) { 30                 /* 隐藏Chrome alt文字以及银色边框 */ 31                 visibility: hidden; 32             } 33  34             img::before { 35                 /* 淡蓝色占位背景 */ 36                 content: ""; 37                 position: absolute; 38                 left: 0; 39                 width: 100%; 40                 height: 100%; 41                 background-color: #f0f3f9; 42                 visibility: visible; 43             } 44  45             img::after { 46                 /* 黑色alt信息条 */ 47                 content: attr(alt); 48                 position: absolute; 49                 left: 0; 50                 bottom: 0; 51                 width: 100%; 52                 line-height: 30px; 53                 background-color: rgba(0, 0, 0, .5); 54                 color: white; 55                 font-size: 14px; 56                 transform: translateY(100%); 57                 /* 来点过渡动画效果 */ 58                 transition: transform .2s; 59                 visibility: visible; 60             } 61  62  63             img:hover::after { 64                 transform: translateY(0); 65             } 66  67         </style> 68     </head> 69  70     <body> 71         <div style="width: 200px;height: 200px;background: blanchedalmond;overflow: auto;"> 72             <!-- 滚屏加载效果HTML: --> 73             <!-- <img> --> 74             <img alt="图1" src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3791918726,2864900975&fm=26&gp=0.jpg"> 75             <img alt="美女沉思图" data-src="1.jpg"> 76             <img alt="图3" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg"> 77             <img alt="沉思图" data-src="1.jpg"> 78         </div> 79     </body> 80     <script> 81  82     </script> 83  84 </html>

运行效果:

 CSS世界--代码实践--图片alt信息呈现

 

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS世界–代码实践–图片alt信息呈现
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏