css样式里可以用border-radius把div或图片变成带有一定圆角的，如果是div本身是正方形，设置圆角度是百分之五十，就是圆形。
border-radius：值可以是具体的px数值，也可以是百分比。
给div或img加这个属性，都可以把边缘变成圆角的或圆形的。
正方形的div或正方形的img图片，加border-radius:50%;会变成圆形。
此外，还可以单独设置两个边框的圆角，单个角：
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。
设置div一定透明度的背景色，颜色可以用rgba，这个有第四个参数，例如0.5，就是半透明。
图片的透明，可以直接做成半透明的的png图片。
测试代码：
<style> body{margin:0px;} #divall{margin-top:30px;margin-left:30px;width:500px;height:230px;background-image:url(bg1.png);position:relative;} #div1{width:100px;height:50px;background:rgba(255,0,0,0.5);border-radius:20px;text-align:center;line-height:50px; position:absolute;top:20px;float:left;left:20px;} #div2{width:100px;height:100px;border-radius:50%;position:absolute;top:20px;float:left;left:140px;background:#2c8a46; text-align:center;line-height:100px;} #div3{width:100px;height:100px;border-radius:50%;position:absolute;top:20px;float:left;left:260px;background-image:url(tu1.png); text-align:center;line-height:100px;color:white;} #div4{width:100px;height:100px;border-top-left-radius:40px; position:absolute;top:90px;float:left;left:20px;background:#95f1f7; text-align:center;line-height:100px;} #div5{width:100px;height:50px;border-top-right-radius:40px; position:absolute;top:140px;float:left;left:140px;background:rgb(214,216,16); text-align:center;line-height:50px;} #divall .a1{border-radius:50%;position:absolute;top:20px;float:left;left:380px;} #divall .a2{border-bottom-right-radius:50%;position:absolute;top:140px;float:left;left:260px;} #divall .a3{border-bottom-left-radius:50%;position:absolute;top:140px;float:left;left:380px;} </style> </head> <body> <div id="divall"> <div id="div1">内容</div> <div id="div2">内容</div> <div id="div3">内容</div> <img class="a1" src="tu1.png"> <div id="div4">内容</div> <div id="div5">内容</div> <div id="div6">内容</div> <img class="a2" src="tu2.png"> <img class="a3" src="tu3.png"> </div>
图示：
