Jquery 带透明背景的圆形矩形图像
我必须实现如下弹出窗口:Jquery 带透明背景的圆形矩形图像,jquery,html,css,Jquery,Html,Css,我必须实现如下弹出窗口: <div style="border: 3px solid white; border-radius: 25px; height: 50px; width: 50px; background: #aaa url(facebook-head.png)"></div> 它可以出现在屏幕上的任何位置。我需要把一张50x50的矩形Facebook个人资料图片放在一个带有厚厚白色边框的圆圈内。因此,我需要修剪轮廓图像,同时保持背景显示通过。问题是背景本
<div style="border: 3px solid white; border-radius: 25px;
height: 50px; width: 50px;
background: #aaa url(facebook-head.png)"></div>
它可以出现在屏幕上的任何位置。我需要把一张50x50的矩形Facebook个人资料图片放在一个带有厚厚白色边框的圆圈内。因此,我需要修剪轮廓图像,同时保持背景显示通过。问题是背景本身就是一个图像,因此在圆外使用纯色的遮罩图像不起作用
这在HTML/CSS/jQuery中是可能的吗?当然,将图像作为背景(使用CSS),并使用边框半径使包含元素的角变圆 大概是这样的:
<div style="border: 3px solid white; border-radius: 25px;
height: 50px; width: 50px;
background: #aaa url(facebook-head.png)"></div>
注意:IE 8及以下版本不会使角变圆:我只需使用
边框半径
来创建圆,并结合溢出:隐藏
来裁剪图像。下面是一个例子:
标记:
<div class="wrapper">
<img src="http://www.petscarecenter.com/wp-content/uploads/2011/05/dog.jpg" />
</div>
这是一个样本,上面有一张像OSX lion一样发光的照片
Fidde:
HTML
<div class="userprofile">
<div style="background-image: url('http://images.nationalgeographic.com/wpf/media-live/photos/000/007/cache/spider-monkey_719_600x450.jpg');" class="mypic" id="mypic">
<span class="glow"> </span>
</div>
<span class="username">Warren G</span>
</div>
PS.如果MSIE为旧版本,则不支持此操作
body {background:black; margin:100px}
.userprofile {
padding: 20px 0px 0px 0px;
text-align: center;
list-style-type: none;
}
.mypic {
border-radius: 50px;
position: relative;
display: block;
margin: 10px auto;
box-shadow: 0px 0px 0px 4px #4b4b4b, 0px 0px 10px 10px rgba(0, 0, 0, 0.3);
width: 100px;
height: 100px;
behavior: url(/resources/css/PIE.htc);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.glow {
display: block;
width: 109px;
height: 107px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -55px;
box-shadow: inset 90px 110px 0px -90px rgba(255,255,255,.15);
border-radius: 50%;
}
.username {color:#efefef}