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

CSS3:background新增特性详解

2016-04-13 18:28 796 查看

前言

CSS3的背景新增了几个特性,这篇文章就是扯扯这些;

在不考虑太低级的浏览器[IE10-]的情况下,主流浏览器和移动端可以直接开用了;

值得一提:先后顺序非常重要,裁切和定位都需要在设置背景图之后,在前是无效的!!

代码

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>CSS3 Background详解</title>
<style type="text/css" media="screen">
.bg-origin>div,
.bg-clip>div,
.bg-size>div,
.bg-multiple,
.bg-multiple2 {
width: 150px;
height: 150px;
display: inline-block;
margin: 10px;
padding: 20px;
border: 10px solid #ff0;
}
/*
backgound-origin的出现改变了背景图只能从左上角开始的唯一情况;
background-origin:padding-box; 是让背景图从内填充区域开始
backgounrd-origin:border-box; 是让背景图从边框区域开始
background-origin:content-box; 是让背景图从内容区域开始
*/

.bg-origin>.bo-pb {
background: #f00 url(1.png) no-repeat;
-moz-background-origin: padding-box;
-webkit-background-origin: padding-box;
-o-background-origin: padding-box;
background-origin: padding-box;
}

.bg-origin>.bo-bb {
background: #f00 url(1.png) no-repeat;
-moz-background-origin: border-box;
-webkit-background-origin: border-box;
-o-background-origin: border-box;
background-origin: border-box;
}

.bg-origin>.bo-cb {
background: #f00 url(1.png) no-repeat;
-moz-background-origin: content-box;
-webkit-background-origin: content-box;
-o-background-origin: content-box;
background-origin: content-box;
}
/*
裁剪背景图区域,和origin很类似,都有三种模式;
但是区别在于,clip是裁剪!!!!!!!而不是图片开始的位置;
padding-box就是在padding之外的背景图区域范围被干掉了,同理;
content-box就是内容区域之外的全部被裁剪掉了
*/

.bg-clip>.bc-pb {
background: #f00 url(1.png) no-repeat;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
-o-background-clip: padding-box;
background-clip: padding-box;
}

.bg-clip>.bc-bb {
background: #f00 url(1.png) no-repeat;
-moz-background-clip: border-box;
-webkit-background-clip: border-box;
-o-background-clip: border-box;
background-clip: border-box;
}

.bg-clip>.bc-cb {
background: #f00 url(1.png) no-repeat;
-moz-background-clip: content-box;
-webkit-background-clip: content-box;
-o-background-clip: content-box;
background-clip: content-box;
}
/*
background-size: auto || length || percentage || cover || contain;
auto是保持默认原来的大小
支持像素,百分比,最后两个,
cover是全面覆盖,完全放大,大多情况焦点会偏移
contain是根据盒子内容来适配背景图[保持一定的宽高臂力]

cover和contain的方法都会失真[在图小于盒子模型的时候];
*/

.bs-percent {
background: #f00 url(1.png) no-repeat;
background-size: 50% 70%;
}

.bs-contain {
background: #f00 url(1.png) no-repeat;
background-size: contain;
}

.bs-cover {
background: #f00 url(1.png) no-repeat;
background-size: cover;
}

.bg-multiple {
background: url(1.png) ,url(2.jpg) ;
background-repeat: round;
}

.bg-multiple2 {
background: url(1.png) ,url(2.jpg);
background-repeat: space;
}
</style>
</head>

<body>
<h1>background-origin:</h1>
<div class="bg-origin">
<div class="bo-pb">padding-box</div>
<div class="bo-bb">border-box</div>
<div class="bo-cb">content-box</div>
</div>
<h1>background-clip:</h1>
<div class="bg-clip">
<div class="bc-pb">padding-box</div>
<div class="bc-bb">border-box</div>
<div class="bc-cb">content-box</div>
</div>
<h1>background-size:</h1>
<div class="bg-size">
<div class="bs-percent">percentage</div>
<div class="bs-contain">contain</div>
<div class="bs-cover">cover</div>
</div>
<h1>background-multiple:</h1>
<div class="bg-multiple">
background-repeat: round;
</div>
<div class="bg-multiple2">
background-repeat: space; 是两端对齐
</div>
</body>

</html>

效果图

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

标签：

相关文章推荐

新的分享

章节导航