1

cssを使用して、divに「shadow」/「cover」（名前の付け方がわかりません）を追加したいと思います。

カバー：

http://imageshack.us/photo/my-images/842/shadowon.png/

カバーオフ：

http://imageshack.us/photo/my-images/502/shadowoff.png/

background-image不透明度の小さいpngファイルが使用されているプロパティを使用して、追加のdivでそれを行うことができます。しかし、私はcssでこの問題を解決したいと思います。

可能です？

どんな助けでもいただければ幸いです。

4

3 に答える 3

4

私はそのようなことを提案します：

​<div class="image">
    <img src="http://desmond.imageshack.us/Himg502/scaled.php?server=502&filename=shadowoff.png&res=landing">
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

と

    .image {background: #000; width: 145px; height: 104px;}
    .image img {-webkit-transition: all 1s;}
    .image:hover img {opacity: 0.8;}

いくつかのCSS3トランジションを追加して、アニメーションをスムーズにすることができます:) http://jsfiddle.net/pRbfT/1/

于 2012-06-06T08:10:26.420 に答える
0

グラデーションであるcss3プロパティを使用して、効果を実現できます。簡単にするために、次のようなcss3ジェネレーターを使用できます。http：//www.colorzilla.com/gradient-editor/ 内側のシャドウ設定でボックスシャドウを使用して、効果を高めることもできます。

古いブラウザはこの機能をサポートしないことに注意してください。

于 2012-06-06T08:03:15.607 に答える
0

単色であるため、画像の上に透明なdivを配置できます。

<div class="image_wrapper">
   <div class="cover"/>
   <img src="someimage.png"/>
</div>

このcssを使用します

.image_wrapper {
   position: relative;
   float: left;
}
.image_wrapper .cover {
   display: none;
   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 0.2;
   background-color: #000;
}
.image_wrapper:hover .cover {
   display: block;
}

Old IEでは、非aタグにカーソルを合わせると機能しないため、の代わりに使用できます。aクロス ブラウザの不透明度が必要な場合は、これを使用できます。divimage_wrapper

  -khtml-opacity:.20;
  -moz-opacity:.20;
  -ms-filter:”alpha(opacity=20)”;
  filter:alpha(opacity=20);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.2);
  opacity:.20;
于 2012-06-06T08:14:58.697 に答える