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

溢出设置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

 

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

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

 

上一篇:媒体元素


下一篇:mapbox去除logo控件和attribution控件