javascript - CSSまたはJavascriptを使用して丸みを帯びた画像を暗くする

Question

画像を暗くするためにこれまでに見たすべての解決策は、角が丸くない画像のためのものです。私が見たすべての解決策は背景色を使用することを要求しているので、これは問題があります。角が丸くなると、背景色が透けて見えます。私はこれらの解決策について話している：

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

ロールオーバー時に画像を暗くします

これを行う他の方法はありますが、それでも純粋にcssまたはjavascriptを使用します（もちろん、jQueryが含まれています）。前もって感謝します！

Answer 1

http://jsfiddle.net/L7rWJ/

完全にcssで実行できます。

オーバーレイと画像の両方を丸めます。

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

ああ、気にしない場合、つまりトランジションを使用してさらに快適にすることができます：http: //jsfiddle.net/fYEWr/

Answer 2

background-clip画像とそのコンテナで使用できます-デモ

  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 3

このチュートリアルhttp://mattbango.com/notebook/web-development/hover-zoom-effect-with-jquery-and-css/を使用して問題を解決しました

うまくいけば、これと同じことをしようとしている人々がこのページを見つけ、これらのいくつかの解決策の1つが彼らのために働くでしょう！

みんなありがとう！

Answer 4

背景色を指定するコンテナに境界線の半径を追加します。

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 5

このコードをimg、img hover、tintに入れて、角を丸くすることができます

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