微信扫一扫打赏支持

范仁义css3课程---31、背景1（ background-image）

范仁义css3课程---31、背景1（ background-image）

一、总结

一句话总结：

可以使用background-image来设置背景图片，背景图可以和背景颜色同时设置，可以使用background-repeat用于设置背景图片的重复方式

 

 

1、background-image的语法是怎样的？

background-image:ur1(相对路径):background-image:ur1(imgs/aa.png)

 

2、background-repeat的作用是什么？

background-repeat用于设置背景图片的重复方式

 

 

 

二、background-image 和 background-repeat

博客对应课程的视频位置：31、背景1（ background-image）
https://www.fanrenyi.com/video/10/73

 

 

1、background-image
-语法：background-image:ur1（相对路径）；

使用background-image来设置背景图片
-如果背景图片大于元素，默认会显示图片的左上角
-如果背景图片和元素一样大，则会将背景图片全部显示
-如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素

 

2、背景图可以和背景颜色同时设置
可以同时为一个元素指定背景颜色和背景图片，
这样背景颜色将会作为背景图片的底色
一般情况下设置背景图片时都会同时指定一个背景颜色
因为图片加载需要时间

 

 

3、background-repeat
background-repeat用于设置背景图片的重复方式

可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat，背景图片不会重复，有多大就显示多大
repeat-x，背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复

 

三、课程代码

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>背景1（ background-image）</title>
 6     <style>
 7         .box1{
 8             width: 800px;
 9             height: 800px;
10             border: 1px solid red;
11             /*background-color: #ff4f81;*/
12             background-image: url("../imgs/c8_1.png");
13             background-repeat:repeat-y;
14         }
15     </style>
16 </head>
17 <body>
18 <!--
19 背景
20 1、我们可以用background-color来给标签设置背景颜色
21 
22 2、background-image可以设置背景图片
23 基本语法
24 background-image: url(图片路径);
25 
26 a、当标签区域比图片小的时候，默认只显示图片的左上角
27 b、当标签区域比图片区域大的时候，就是默认就会重复背景图片
28 
29 3、background-repeat 设置背景图像是否及如何重复。
30 默认值，repeat
31 no-repeat：不重复
32 repeat-x
33 repeat-y
34 
35 
36 
37 
38 -->
39 <div class="box1"></div>
40 </body>
41 </html>

 

 

 

 

 
posted @ 2020-02-11 05:18  范仁义  阅读(368)  评论(0)  编辑  收藏  举报