圓形覆蓋圖不會伸展100％

我正在試圖動態填充帶有懸停時的圖片的圓形，將顯示橙色色調。但是，我有一個奇怪的橙色邊框的圖片。關於如何「拉伸」圖片以覆蓋橙色的任何想法？先謝謝你！下面的代碼：圓形覆蓋圖不會伸展100％

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/

來源

2013-03-05 stefanie

在Chrome開發人員工具中使用CSS播放我可以看到，橙色圓圈與您的照片不匹配。 – 2013-03-05 10:49:55

更改.bircle的高度和寬度爲181px似乎可以解決問題......不知道爲什麼我的CSS不是那麼好 – 2013-03-05 11:02:14

這個工作對我來說：

.overlay:hover { 
    float: left; 
    background:#fd761f; 
    width: 180px; 
    height: 180px; 
    border-radius: 50%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
}

我已經改變了所添加:hover到.overlay類和刪除margin:5px

注唯一的東西：一個形象得到圓角和CSS調整大小的方式取決於它的原始大小。

來源

2013-03-05 11:33:08

這適用於我！然而，我徘徊後有一個奇怪的懸停效果。我可以描述它的最佳方式就像我的鼠標關閉後的「相機閃光燈」。不知道爲什麼會發生。 – stefanie 2013-03-05 16:12:09

你在那裏看到的效果是你在'.circle'類上添加的實際轉換。如果您想關閉該效果，只需刪除以下'-moz-transition：all 0.5s; -webkit-transition：全部0.5s; -ms-transition：全部0.5s; -o-transition：全部0.5s;過渡：全部0.5s;'。事情現在應該工作。 – 2013-03-05 16:32:29

謝謝！修復了一切！ – stefanie 2013-03-06 01:04:01

圓形覆蓋圖不會伸展100％

回答

相關問題