0

ホバーするとオレンジ色の色合いが表示される写真を円に動的に入力しようとしています。ただし、画像に奇妙なオレンジ色の枠があります。オレンジ色をカバーするために画像を「引き伸ばす」方法についてのアイデアはありますか? 前もって感謝します！以下のコード:

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/

4

1 に答える 1

0

これは私のために働く：

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

私が変更したのは、クラスに追加:hoverして削除することだけです.overlaymargin:5px

注: CSS で画像を丸めたりサイズを変更したりする方法は、元のサイズによって異なります。

于 2013-03-05T11:33:08.503 に答える