0

私がやろうとしていることの良い例は Fancy です: http://www.fancy.com/ 投稿の画像にカーソルを合わせると、背景が (パーセンテージで) 暗くなり、前面にボタンが表示されます。 .

同じことをしたいのですが、SHAREボタンを使用します。画像を img として配置し、SHARE ボタンを背景として配置します。ただし、SHAREボタンも暗くせずに画像を暗くする方法がわかりません。

ここに私のHTMLコードがあります:

<div class="src">
<img src="image.jpg" />
</div>

私のCSSコード:

div.src{
    width:100%; 
    height:100%; 
    background:url('icon-share.png') center center no-repeat;
    opacity: 1;
}
div.src img{
    width: 500px;
    min-height: 200px;
    opacity: 0.2;
}

手伝ってくれますか？

幅は常に 500 ピクセルですが、高さは可変です (最小高さ 200 ピクセル)。不透明度を適用する代わりに画像を暗くしたいのですが、それは難しい問題ではないと思います。

編集: もちろん、画像全体をクリックすると、共有ダイアログが開きます。フローティング SHARE ボタンは、ユーザーがそれを共有しようとしていることを知らせるためのものです。

4

1 に答える 1

0

純粋な html と css について話している場合は、画像の上の画像ホルダー内に別の<div>またはを挿入することもできます。<a>

a.share {
    position:absolute;
    width:100%; height:100%;
    background:url(path to icon) rgba(0,0,0,0.75);
    background-repeat: no-repeat;
    background-position:center center;
}
于 2013-07-19T20:23:04.807 に答える