ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Web前端(四)-溢出设置、垂直对齐方式、显示层级、视频播放、图片盗链、图片问题多张图合并在一起显示问题

2021-07-30 19:31:07  阅读:245  来源: 互联网

标签:Web 显示 muted controls 右键 对齐 张图 图片


溢出设置overflow

  • hidden: 超出部分不显示 ,可以解决高度识别为0 和 粘连问题

  • visible: 超出部分显示(默认)

  • scroll: 超出部分滚动显示

 

行内元素的垂直对齐方式vertical-align

  • baseline:基线对齐(默认)

  • top:上对齐

  • middle:中间对齐

  • bottom:下对齐

 

元素的显示层级z-index

  • z-index可以理解为z轴垂直于屏幕的一个朝向, 值越大 离眼睛越近, 这样元素显示的位置就越靠前

 

视频播放

 <!--poster设置封面 loop循环播放 autoplay自动播放(必须设置静音才能自动播放)
 muted静音 controls是否显示控制元素-->
 <video poster="https://ys.mihoyo.com/main/_nuxt/img/47f71d4.jpg"
        loop="loop" autoplay="autoplay" muted="muted"
        controls="controls">
     <!--source视频源-->
     <source src="https://ys.mihoyo.com/main/_nuxt/videos/3e78e80.mp4">
 </video>

 

图片盗链问题

  • 两种情况

    • 图片标签: 直接在图片上右键复制图片地址

    • 背景图片: 右键检查从样式中查看,找到图片路径,在路径上面右键 copy link address

 

图片资源是多张图合并在一起的问题

  • 这种为了将展示页面时多次文件传输 合并成一次传输

 

标签:Web,显示,muted,controls,右键,对齐,张图,图片
来源: https://www.cnblogs.com/XiaoCui-blog/p/15081121.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有