导航菜单

小池-web前端入门到实战:布景色彩、布景图片、布景填充

一、布景

1.怎么设置标签的布景色彩

(1)在CSS中有一个background-color:特点值;,便是专门用来设置标签的布景色彩。

(2)取值:详细单词、RGB、RGBA、十六进制

比如:

 
.p1{
background-color: red;
}
.p2{
background-color: rgb(0,255,0);
}
.p3{
background-color: rgba(0,0,255,1);
}
.p4{
background-color: #00ffff;
}



我是试练


我是试练


我是试练


我是试练




2.怎么设置布景图片?

(1)在CSS中有一个叫做background-image:url();的特点,便是专门用来设置布景图片的。

(2)留意:

i.图片的地址需求放在url()的括号之中,图片的地址可所以本地的地址,也可所以网络的地址。

ii.假如图片的巨细不足以掩盖咱们要求的巨细,那么就会主动在水平缓笔直方向进行平铺和填充。

iii.假如网页上呈现了图片,那么浏览器会再次发送恳求获取图片



 .p1{
height:600px;
width: 600px;
background-color: red;
background-image:url("image/play_tennis.jpg");
}
.........小池-web前端入门到实战:布景色彩、布景图片、布景填充省掉代码........

我是试练




3.布景平铺:咱们怎么设置布景图片?

(1)在CSS中有一个叫做background-repeat的特点,便是专门用来操控布景图片的平铺方法的。

取值:

repeat:默许,在水平缓笔直方向上都需求平铺。

no-repeat:在水平缓笔直方向上都不需求平铺。

repeat-x:只在水平方向上平铺。

repeat-y:只在笔直方向上平铺。

比如:

 .p1{
height:1000px;
width: 600px;
background-color: red;
background-image:url("image/play_tennis.jpg小池-web前端入门到实战:布景色彩、布景图片、布景填充");
/*background-repeat:repeat;!*默许情况下便是repeat,这个意思便是图片巨细不变,铺满指定的区域即可*!*/
/*background-repeat: no-repeat;!*这个意思便是图片就铺一张,然后有当地没填上的就空着*!*/
background-repeat:repeat-x;
}
.........省掉代码........

我是试练




(3)使用场景:用来做布景的多个填充。经过布景图片的平铺来下降图片的巨细,提高网页拜访速度

点击【右上角,重视 子瑜说IT 】继续更新IT资讯以及中国高等教育学生信息网web前端开发教育

8年开发老码农福利赠送:网页制造,网站开发,web前端开发,从最零根底开端的的HTML+CSS+JavaScript。jQuery,Ajax,node,angu小池-web前端入门到实战:布景色彩、布景图片、布景填充lar结构比及移动端小程序项目实战【视频+东西+体系路线图】都有收拾,送给每一位对编程感兴趣的小伙伴

获取方法:

右上角有私信,请私信发我:01 即可获取!

二维码