CSS3中background-orgin实现带相框相片显示结果-案例解析（代码
本文指标：
1、把握background-origin配景原点的运用
题目：
1、实现下列结果，运用纯DIV+CSS，必需运用配景原点background-orgin
2、新建好index.html，写好架构，架构怎样剖析呢
思绪剖析：
1、指标分成高低2局部，每个局部其实都是显示带相框（div含边框）的相片，所以只有首先个实现完成了，第二局部可以复制
2、但是细心调查，上面相片和下面相片的显示还是有点不一样，首先个div的配景图片是在边框内，而下面div的配景图片是在边框里
3、每个局部其实就是一个DIV,包括边框，然后配景图片是一张相片，里面包括一段字符串，字符串高低包括间距
依据剖析，我们得出下列代码
配景原点制作怀旧相片
谢霆锋年轻的模样，一个字帅
张柏芝年轻的模样，一个字美
3、写样式 ，新建css文件夹，里面创建index.css，里面的样式怎么写了，下列是剖析思绪
思绪剖析：
1、.container *
思绪剖析
1、为了设定容器里的所有元素的公共样式，我们可以将这些公共代码写入.container * 样式内
所以index.css中增加代码如下：
.container *{
padding:0;
margin:0;
}2、.photo 相片
1、依据请求得知，边框20px，虚线显示，转成代码即border-width:20px;border-style: dashed;里面的文字有间距，所以padding:20px,字体加粗font-weight:bold,色彩为白色color:#fff;
宽度总体是500，所以width=500-(2个边框20+20+2个padding20+20)=420,高度也是420，所以width:420,height:420
所以index.css中增加代码如下：
.photo {
width:420px;
height: 420px;
border-width:20px;
border-style: dashed;
padding:20px;
font-weight:bold;
color:#fff;
}3、首先张相片设定
由于这张相片的边框是红色的，所以border-color: red;然后配景是帅哥的相片，然后从结果可以看出虚线之间的色彩为灰色即#ccc，所以 background:#ccc url(../images/xtf.jpg) no-repeat; 最关键的是，它的配景图片是以padding为起点的，所以
background-origin: padding-box;这里一定要注意，为了让background-origin生效，background 必需设定属性no-repeat
所以index.css中增加代码如下：
.xtf{
background:#ccc url(../images/xtf.jpg) no-repeat;
border-color: red;
background-origin: padding-box;
}4、第二张相片设定
由于这张相片的边框是橙色的，所以border-color: orange;然后配景是美女的相片，然后从结果可以看出虚线之间的色彩为灰色即#ccc,所以 background:#ccc url(../images/zbz.jpg) no-repeat; 最关键的是，它的配景图片是以边框为起点的，所以
background-origin: border-box;为了让background-origin生效，background 必需设定属性no-repeat
所以index.css中增加代码如下：
.zbz{
background:#ccc url(../images/zbz.jpg) no-repeat;
background-origin: border-box;
border-color: orange;
}到此为止，index.css的全部内容如下：
.container *{
padding:0;
margin:0;
}
.photo {
width:420px;
height: 420px;
border-width:20px;
border-style: dashed;
padding:20px;
font-weight:bold;
color:#fff;
}
.xtf{
background:#ccc url(../images/xtf.jpg) no-repeat;
border-color: red;
background-origin: padding-box;
}
.zbz{
background:#ccc url(../images/zbz.jpg) no-repeat;
background-origin: border-box;
border-color: orange;
}然后将index.css引入index.html中
配景原点制作怀旧相片
谢霆锋年轻的模样，一个字帅
张柏芝年轻的模样，一个字美
运转结果如下：
到此为止，我们就实现了全部的需求
其实 background-origin的值除了可以设定成border-box,padding-box，还可以设定成content-box，这样一来，配景原点就是之内容为起点了，我们可以试下
我们修改帅哥谢的相片设定
.xtf{
background:#ccc url(../images/xtf.jpg) no-repeat;
border-color: red;
background-origin: content-box;/**修改成content-box**/
}运转效果为：
总结：
1、学习了配景原点background-origin的用途，它有3个类型，
一个是border-box:配景图片以边框为起始点
一个是padding-box：配景图片以padding为起始点
一个是content-box：配景图片之内容为起始点
以上就是CSS3中background-orgin实现带相框相片显示结果-案例解析（代码实例 ）的细致内容，更多请关注 百分百源码网 其它相干文章！
