范仁义css3课程---35、背景5( 背景小实例:b站 )

范仁义css3课程---35、背景5( 背景小实例:b站 )

一、总结

一句话总结:

这个b站背景的实例中,最重要的就是background-position: center 0,因为水平方向是center(居中),所以浏览器尺寸改变的话,这个图也是一直居中的

二、背景小实例:b站

博客对应课程的视频位置:35、背景5( 背景小实例:b站 )
https://www.fanrenyi.com/video/10/77

做b站的上半部分的背景图片的样式

三、课程代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>35、背景5( 背景小实例:b站 )</title>
 6     <style>
 7         header{
 8             height: 180px;
 9             background-image: url("../imgs/bg_b.png");
10             background-color: #f9f9f9;
11             background-repeat: no-repeat;
12             background-position: center 0;
13             background-size: cover;
14         }
15     </style>
16 </head>
17 <body>
18 <div>
19     <header></header>
20 </div>
21 </body>
22 </html>
 
原文地址:https://www.cnblogs.com/Renyi-Fan/p/12293708.html