html图片alt,图片ALT信息

  html图片alt,图片ALT信息

  使用缺省科学研究委员会的图片元素实现滚屏加载效果,但是,就有可能存在这样一个体验问题:如果我们的Java脚本语言加载比较慢,我们的页面就很有可能出现一块一块白色的图片区域,纯白色的,没有任何信息,用户完全不知道这里的内容是什么。

  虽然中高音属性可以提供描述信息,但由于视觉效果不好,被隐藏掉了。我们可以在图片还没加载时就把中高音信息呈现出来:

  !DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width,initial-scale=1.0 meta http-equiv= X-UA-Compatible content= ie=edge title CSS世界-代码实践-图片中高音信息呈现/标题样式/*滚屏加载效果CSS *//* img {可见性:隐藏;} img[src] {可见性:可见;} */img {显示:内嵌-块;宽度:180像素高度:100像素/*隐藏火狐中高音文字*/颜色:透明;位置:相对;溢出:隐藏;} img:not([src]) { /*隐藏铬中高音文字以及银色边框*/可见性:隐藏;} img:之前{ /*淡蓝色占位背景*/content:" ";位置:绝对;左:0;宽度:100%;身高:100%;背景色:# f0f3f9可见性:可见;} img:在{ /*之后黑色中高音信息条*/content:attr(alt);位置:绝对;左:0;底部:0;宽度:100%;行高:30px背景色:rgba(0,0,0,5);颜色:白色;字体大小:14pxtransform:平移y(100%);/* 来点过渡动画效果*/过渡:转换. 2s可见性:可见;} img:hover:after { transform:translate y(0);}/style/head body div style=宽度:200 px高度:200像素背景:blanchedalmond 溢出:自动;-滚屏加载效果HTML: -!- img - img alt=图1 src= https://DSS 3。BD静态。com/70 cfv 8 sh _ Q1 ynxgkpowk 1 HF 6 hy/it/u=3791918726,2864900975fm=26gp=0。jpg img alt=美女沉思图data-src=1.jpg img alt=图3 src= https://DSS 0。BD静态。com/70 cfu HSH _ Q1 ynxgkpowk 1 HF 6 hy/it/u=2853553659,1775735885fm=26gp=0。jpg img alt=沉思图data-src= 1。jpg /div/body脚本/脚本/html运行效果:

  到此这篇关于半铸钢钢性铸铁(铸造半钢)世界-代码实践之图片中高音信息呈现的文章就介绍到这了,更多相关钢性铸铁图片中高音信息内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: