CSS3设计背景.docx
- 文档编号:10433624
- 上传时间:2023-05-25
- 格式:DOCX
- 页数:13
- 大小:1.58MB
CSS3设计背景.docx
《CSS3设计背景.docx》由会员分享,可在线阅读,更多相关《CSS3设计背景.docx(13页珍藏版)》请在冰点文库上搜索。
CSS3设计背景
一、设计背景
多背景
逗号分开
background:
url(a.jpg)00,url(b.jpg)0100%;
.box{width:
300px;height:
300px;background:
url(bt_blue.png)no-repeat,url(border.png)repeat-yright0;}
二、背景尺寸
background-size:
xy
background-size:
100%100%刚好放满整个元素
body{background:
#ccc;}
.box{width:
300px;height:
300px;border:
10pxsolid#000;background:
url(miaov.jpg)no-repeat;background-size:
100%100%;}
Cover放大把整个元素放满
body{background:
#ccc;}
.box{width:
300px;height:
300px;border:
10pxsolid#000;background:
url(miaov.jpg)no-repeat;background-size:
cover;}
背景图片会有超出
Contain缩小把背景图片放完
body{background:
#ccc;}
.box{width:
300px;height:
300px;border:
10pxsolid#000;background:
url(miaov.jpg)no-repeat;background-size:
contain;}
body{background:
#ccc;}
.box{width:
300px;height:
300px;border:
10pxsolid#000;background:
url(miaov.jpg)no-repeat,url(miaov2.jpg)no-repeat0bottom;background-size:
contain,100px100px;}