CSS3中background-orgin实现带相框相片显示结果-案例解析(代码
本文目标:
1、把握background-origin背景原点的使用
问题:
1、实现以下结果,使用纯DIV+CSS,必需使用背景原点background-orgin
附加说明:
1、每个相框宽500px,高500px,其中border宽20px,里面文字padding为20,边框的大小为20px
2、里面的相片必需依照背景图片实现
此刻来详细操纵
1、预备素材:根名目创立images文件夹,把相关素材图片都存置与此,素材有
2、创立好index.html,写好架构,架构怎样剖析呢
思绪剖析:
1、目标分成上下2部分,每个部分其实都是显示带相框(div含边框)的相片,所以只要第一个实现完成了,第二部分可以复制
2、但是细心视察,上面相片和下面相片的显示还是有点不一样,第一个div的背景图片是在边框内,而下面div的背景图片是在边框里
3、每个部分其实就是一个DIV,包括边框,然后背景图片是一张相片,里面包括一段字符串,字符串上下包括间距
按照剖析,我们得出以下代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景原点制作怀旧相片</title> </head> <body> <div class="container"> <div class="photo xtf"> <div class="content">谢霆锋年轻的模样,一个字帅</div> </div> <div class="photo zbz"> <div class="content">张柏芝年轻的模样,一个字美</div> </div> </div> </body> </html>
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中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景原点制作怀旧相片</title> <link href="css/index.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="photo xtf"> <div class="content">谢霆锋年轻的模样,一个字帅</div> </div> <div class="photo zbz"> <div class="content">张柏芝年轻的模样,一个字美</div> </div> </div> </body> </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实现带相框相片显示结果-案例解析(代码实例 )的具体内容,更多请关注百分百源码网其它相关文章!