<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试background-repeat</title>
<style>
.box{display:inline-block;margin:20px;padding:40px;background:#ff0;position:relative;}
.box img{display:block;}
.tl{width:40px;height:40px;position:absolute;top:0;left:0;z-index:1;background: url("k1.png") no-repeat;background-position:top left;}
.tc{width:100%;height:40px;position:absolute;top:0;left:0;background: url("k1.png") repeat;background-position:top center;}
.tr{width:40px;height:40px;position:absolute;top:0;right:0;z-index:1;background: url("k1.png") no-repeat;background-position:top right;}
.cl{width:40px;height:100%;position:absolute;top:0;left:0;background: url("k1.png") repeat;background-position:center left;}
.cr{width:40px;height:100%;position:absolute;top:0;right:0;background: url("k1.png") repeat;background-position:center right;}
.bl{width:40px;height:40px;position:absolute;bottom:0;left:0;z-index:1;background: url("k1.png") no-repeat;background-position:bottom left;}
.bc{width:100%;height:40px;position:absolute;bottom:0;left:0;background: url("k1.png") repeat;background-position:bottom center;}
.br{width:40px;height:40px;position:absolute;bottom:0;right:0;z-index:1;background: url("k1.png") no-repeat;background-position:bottom right;}
</style>
</head>
<body>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="1.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="2.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="3.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="4.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="5.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="6.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="7.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="8.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="9.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="10.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="11.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="12.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="13.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="14.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="15.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="a.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="b.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="c.jpg" alt="">
</div>
<div class="box border">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="cl"></div>
<div class="cr"></div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
<img src="d.jpg" alt="">
</div>
</body>
<script src="jquery.min.js"></script>
<script>
var border_t = 20;//上边框宽度px
var border_r = 21;//右边框宽度px
var border_b = 34;//下边框宽度px
var border_l = 22;//左边框宽度px
var border_img = 'k3.gif';//边框样式img
$('.border>div').each(function(){
$(this).css('background-image',"url('"+border_img+"')");
})
$('.border').each(function(){
$(this).css('padding-top',border_t+'px');
$(this).css('padding-left',border_l+'px');
$(this).css('padding-right',border_r+'px');
$(this).css('padding-bottom',border_b+'px');
$(this).find('.tl').css({'width':border_l+'px','height':border_t+'px'});
$(this).find('.tc').css({'height':border_t+'px'});
$(this).find('.tr').css({'width':border_r+'px','height':border_t+'px'});
$(this).find('.cl').css({'width':border_l+'px'});
$(this).find('.cr').css({'width':border_r+'px'});
$(this).find('.bl').css({'width':border_l+'px','height':border_b+'px'});
$(this).find('.bc').css({'height':border_b+'px'});
$(this).find('.br').css({'width':border_r+'px','height':border_b+'px'});
})
</script>
</html>
图片添加相框的前端实现
需积分: 5 185 浏览量
2019-02-28
08:56:16
上传
评论
收藏 1.98MB RAR 举报
相框的前端实现.rar （26个子文件） 
8.jpg 12KB
jquery.min.js 91KB a.jpg 207KB b.jpg 1008KB 15.jpg 8KB 14.jpg 8KB 2.jpg 13KB
k5.gif 5KB 1.jpg 10KB 6.jpg 11KB k8.gif 15KB 3.jpg 10KB 5.jpg 15KB k3.gif 3KB
index.html 7KB 11.jpg 8KB 4.jpg 7KB 10.jpg 7KB
k2.png 447KB 13.jpg 9KB k7.png 3KB k6.gif 5KB 12.jpg 9KB 9.jpg 10KB k1.png 160KB 7.jpg 10KB资源评论
