0

ホバーで画像に色を付けようとしています。私はcssを機能させていますが、エッジが丸い、または親を完全に埋めていない画像の一部は、黒い背景を示しています。 ここに画像の説明を入力してください

（左端にはマウスがあります）

imgだけが着色されるように、どのように黒を隠すことができますか？

これが私のCSSです：

.thumb {
    width:150px;
    height:150px;
    margin: 0px 5px 14px 14px;
    float:left;
    display:inline;
background: black;
    overflow:hidden;
    cursor: pointer;
    /*border: 2px solid #00A3C6; */
}

.thumb img {
    display: block;
    -webkit-transition: all 0.25s linear;
       -moz-transition: all 0.25s linear;
        -ms-transition: all 0.25s linear;
         -o-transition: all 0.25s linear;
            transition: all 0.25s linear;

}

.thumb:hover img { 
    opacity: 0.7;
}​
4

2 に答える 2

1

画像の角が丸くなっている場合はborder-radius、css で使用して、「色合い」コンテナの角を丸く設定できます。

実際の画像に白い境界線がある場合は、ちょっと運が悪いです。画像をトリミングすることはできますが、どのような種類の画像に対してもこれを動的に行う方法はありません。

于 2012-11-14T20:07:28.510 に答える
0

imgだけが着色されるように、どうすれば黒を隠すことができますか?

background: blackから削除してみてください.thumb。

PSdisplay: inlineも必要ありません

于 2012-11-14T20:11:05.027 に答える