5

CSS を使用して画像に角丸を追加し、マウスオーバーで不透明度を変更したいのは、これがかわいいからです。バグがあります: マウスオーバーの後、画像が消えます。

CSS は非常に単純です。

.article img {
  margin-bottom: 5px;
  -moz-border-radius: 15px;  /* for Firefox */
  -webkit-border-radius: 15px; /* for Webkit-Browsers */
  border-radius: 15px; /* regular */
}

.article:hover .img {
  opacity: 0.8;
}

htmlもテスト用です（これは私がグーグルで検索した最初の画像です）：

<li class="article">
    <div class="img">
        <a href="#">
            <img src="http://i.telegraph.co.uk/multimedia/archive/02371/karen-ann-jones_2371086k.jpg" alt="Url">
        </a>
    </div>
</li>

jsfiddle で確認できます: http://jsfiddle.net/9DjLT/3/

ブラウザ：ff19

4

3 に答える 3

0

FWIW、Chrome 38でも同様の問題に遭遇しました。私の場合、border-radius値を持つdivと透明度を持つ画像要素があり、透明な画像が隠されていました。これを修正するために、1 以外の不透明度を親要素に追加しました (border-radius を使用)。このようなもの：

.round_box {
  border-radius: 5px;
  opacity: 0.999999;
}

.transparent {
  opacity: 0.6;
}

<div class="round_box">
  <div class="transparent">
</div>

... 親要素に追加opacity: 0.999999;すると、透明要素が正しく表示されました。ドロップ シャドウ、列のレイアウトなど、他にも多くの興味深いスタイルが進行中であることに注意してください。

于 2014-11-09T21:46:27.580 に答える
0

li:hover が 100% の幅を取っているため、css に問題があると思います。したがって、マウスカーソルが不透明度による画像効果になるまで。以下のCSSの変更を試してみてください

.img a:hover{
  opacity: 0.8;
 }
于 2013-03-28T05:40:38.390 に答える