您的位置：首页 > Web前端 > CSS

css3-背景图片尺寸裁剪原点多背景等属性

2016-11-21 20:25 465 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*<!--------------------背景图片尺寸 等比例 属性----------------------- -->*/

/*background: url(images/baby0.jpg) no-repeat;*/
/* 设置背景图片大小*/
/*长和宽*/
/*background-size:100px 100px;*/

/*background-size: 50% 50%;*/

/*
background-size取值
1、具体的长度300px
2、百分比
3、cover: 覆盖 ： 图片会完全覆盖盒子，有可能显示不完整, 缩放是等比例的
4、contain: 包含 ：背景图片会完全等比例 显示盒子中，有可能不会铺满盒子；
*/
/*background-size: cover;*/

/*background-size: contain;*/

/*----------------------------------背景的原点-------------------------------------------*/
.box{
/*background-image: url(images/baby0.jpg);*/
/*background-repeat: no-repeat;*/

/*/!* background-origin: 用于设置背景图片从什么地开始平铺*!/*/
/*/!*设置不平铺的话 图片以默认大小显示*!/*/
/*/!*background-origin: padding-box; 、*!/*/
/*/!*background-origin: content-box;*!/*/
/*/!*background-size: cover;*!/ cover 覆盖*/
/*/!*background-origin: border-box;*!/*/
}

/*----------------------------------背景的裁剪------------------------------------------*/
.box{
/*background-image: url(images/baby0.jpg);*/
/*background-repeat: no-repeat;*/
/*/!* 设置背景原点为 border-box*!/*/
/*background-origin: border-box;*/

/*写法 background-clip；border-box*/
/*border-box： 从border区域向外裁剪背景。*/
/*padding-box： 从padding区域向外裁剪背景。*/
/*content-box： 从content区域向外裁剪背景。*/
/*no-clip： 从border区域向外裁剪背景。*/
}

/*--------------------------------------多背景-------------------------------------------*/

.box{
/*写法中间用逗号隔开*/
/*background:url(images/bg1.png) no-repeat left top,*/
/*url(images/bg2.png) no-repeat right top,*/
/*url(images/bg4.png) no-repeat left bottom,*/
/*url(images/bg3.png) no-repeat right bottom,*/
/*url(images/bg5.png) no-repeat center center;*/
}
</style>

</head>
<body>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

css3-背景图片尺寸 裁剪 原点 多背景等属性

css3-背景图片尺寸裁剪原点多背景等属性