css 如何将七张照片布置成一个圈？

html-css019

css 如何将七张照片布置成一个圈？,第1张

1. 可以使用css的border-image属性设置边框的背景图片。2. 可以使用background设置多个背景图片，并分别设置每个背景的位置。3. 把所有图片先合成一个圆形图片，然后整个图片作为背景图片。

<html>

<head>

<meta http-equiv="content-type" content="text/html charset=UTF-8" />

<title>测试</title>

 

</head>

<body>

<style>

div{margin-bottom:20px}

</style>

 <div style="width:100pxheight:100pxoverflow:hiddenbackground:url(http://img.baidu.com/img/iknow/r/image/2014-01-03/297d706b130942bca4e0d5bbb96cd8aa.png?t=1388712210)">

</div>

<div style="width:100pxheight:100pxbackground:url(http://img.baidu.com/img/iknow/r/image/2014-01-03/297d706b130942bca4e0d5bbb96cd8aa.png?t=1388712210)background-size:100px"></div>

<div style="width:100pxheight:100pxoverflow:hidden"><img src="http://img.baidu.com/img/iknow/r/image/2014-01-03/297d706b130942bca4e0d5bbb96cd8aa.png?t=1388712210"></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 

<script type="text/javascript"> 

function getHeight() {

     var h = $("img").outerHeight() //取图片高度

     var w = $("img").outerWidth()  //取图片宽度

     if (h > w){  //判断一下，如果高度大过宽度，就设置宽度为100，高度多出来的，会被DIV的overflow:hidden裁剪掉，反之，宽度比较大就设置高度为100，宽度多出来的会被裁剪。

     $("img").width(100)

      }

     else{

     $("img").height(100)

     }

}

window.onload = function() { 

getHeight() 

} 

</script>

</body>

</html>

用了三种方法，你自己看一下吧。

第三种方法，你可以搜搜资料，看看有没有JQUERY获取背景大小，然后再设置小的为固定，然后，多出来裁切掉，这样的话，就可以在背景样式中加上center显示图片中间。

可以使用最新的css3进行裁切或遮罩。

使用div配合css3再结合svg可以实现各种形状的裁切，css3加背景可以实现遮罩效果。

如果需要兼容的话，可以使用第三方插件。