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

 

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

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