微信扫一扫打赏支持

范仁义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>

 

 

 

 

 

 

 
posted @ 2020-02-13 05:06  范仁义  阅读(156)  评论(0)  编辑  收藏  举报