使用CSS或Javascript變暗圓形圖像

Question

到目前爲止，我所看到的所有解決方法都是讓圖像變暗，而不是使用圓角的圖像。這是有問題的，因爲我見過的所有解決方案都需要使用背景顏色。當角落變圓時，背景顏色會顯示。我說的這些解決方案：

http://jsbin.com/icemiy/1/edit

Darken image on rollover

是否有這樣做仍在純粹通過CSS或JavaScript的其他方式（包括jQuery的，當然）。提前致謝！

Answer 1

我使用本教程http://mattbango.com/notebook/web-development/hover-zoom-effect-with-jquery-and-css/

希望人們試圖做同樣的事情會發現這個頁面，這幾個解決方案之一會爲他們工作，解決我的問題！

謝謝大家！

Answer 2

添加邊框半徑爲你所給予的背景色的容器。

在你jsBin例子做：

.tint { 
    overflow: hidden; 
    float: left; 
    background: blue; 
    margin: 0 20px 20px 0; 
    border-radius:20px; 
    -moz-border-radius:20px; 
    -webkit-border-radius:20px; 
    } 

Answer 3

http://jsfiddle.net/L7rWJ/

完全可行的CSS。

輪都覆蓋和圖像：

#overlay, img{ 
    -webkit-border-radius:15px; 
    -moz-border-radius:15px; 
    border-radius:15px; 
} 

哦，如果你不在乎例如，你可以使用轉換額外美好的事物：http://jsfiddle.net/fYEWr/

Answer 4

您可以在圖像上使用background-clip和它們的容器 - DEMO

figure { 
    border-radius: 10px; 
    -moz-background-clip: padding; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    } 

    img { 
    float: left; 
    background: black; 
    display: block; 
    -moz-transition: opacity .3s linear; 
    -webkit-transition: opacity .3s linear; 
    -ms-transition: opacity .3s linear; 
    -o-transition: opacity .3s linear; 
    transition: opacity .3s linear; 

    border-radius: 10px; 
    -moz-background-clip: padding; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    } 

Answer 5

，你可以把這個代碼在IMG，IMG懸停和色調有圓角

-webkit-border-radius:10px; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px; 
border-bottom-right-radius: 10px; 
border-bottom-left-radius: 10px;