我正在尝试用悬停时显示橙色的图片动态填充圆圈。但是,我的图片有一个奇怪的橙色边框。关于如何“拉伸”图片以覆盖橙色的任何想法?先感谢您!下面的代码:
HTML 代码:
<div class='overlay'>
<div class='circle' style='background:url(http://www.bigpicture.in/wp-content/uploads/2010/08/BlackAndWhitePortraitsPhotography26.jpg) 100% no-repeat;background-size:cover'>
</div>
CSS 代码:
.circle {
float: left;
background: #d9d6d1;
width: 180px;
height: 180px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
opacity:1;
filter:alpha(opacity=100);
}
.circle:hover {
opacity: 0.5;
filter:alpha(opacity=50);
}
.overlay {
float: left;
background:#fd761f;
margin: 5px;
width: 180px;
height: 180px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
jsfiddle:http: //jsfiddle.net/hpPpD/