1

ユーザーがマウスを写真の上に置くと、写真が写真全体にオーバーレイされた繰り返しパターンを取得するこの効果を達成しようとしています。

問題:オーバーレイ div を写真に完全にオーバーレイすることができないようです。これはどのように行うべきですか？

JSfiddle: http://jsfiddle.net/KDyKH/2/

編集：フィドルを更新しました

CSS

#container {
    position: relative;
    padding: 10px;
    width: 1000px;
    height: 500px;
    background: blue;
}

.photo_box {
    padding: 8px 10px 11px 10px;
    background: #fff;
    -webkit-box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
    -moz-box-shadow:    1px 1px 6px rgba(50, 50, 50, 0.25);
    box-shadow:         1px 1px 6px rgba(50, 50, 50, 0.25);
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    display: inline-block;
    position: relative;
}

.photo {
    position: absolute;
    z-index: 0;
    margin-bottom: 13px;
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.photo_tint {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    background: red;
    -moz-opacity: 0.70;
    opacity: 0.70;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
}​

HTML

<div id="container">
    <div class="photo_box">
        <img src='http://www.kurzweilai.net/images/Google-logo.jpg' class="photo">
            <div class="photo_tint"></div>
        </img>
    </div>
</div>​
4

4 に答える 4

1 
.photo_tint {
    position: absolute;
    z-index: 100;
    background: red;
    top:0; left:0;
    width:100%; height:100%;
}​

???

http://jsfiddle.net/tFbbM/1/

于 2012-06-23T22:34:29.360 に答える
1

プロパティをleftに追加するだけでなく、相対的に配置する必要があります (質問を編集する前ではありませんでした)。top.photo_tint.photo_box

.photo_box {
    position: relative;
}

.photo_tint {
    left:0;
    right:0;
}​

http://jsfiddle.net/KDyKH/5/

絶対位置の left/top/right/bottom 属性は、位置が相対または絶対に設定された、階層内の上位の最後の要素から機能します。親要素の位置が相対/絶対に設定されていない場合は、本体が使用されます。あなたの場合、最も近い相対的に配置された要素は だっ#containerたのでleft、目的の効果を達成するために、必要に応じて の原点を使用し、 の原点を使用topしていませんでした。.photo_tint#container.photo_box

さらに、要素が position:absolute に設定されていて、左/上/右/右のプロパティが設定されていない場合、要素は絶対として動作しません(see this question)。

于 2012-06-23T23:05:11.523 に答える
0

画像の z-index:-1 または div の z-index:2

#container {
    position: relative;
    width: 500px;
    height: 500px;
    background: blue;
}

.photo {
    position: relative;
    width: 300px;
    height: 100px;
    background: green;
}

.photo_tint {
    position: absolute;
    z-index: 1;
    background: red;
    width: 300px;
    height: 100px;
    top:0px;
}​
于 2012-06-23T22:37:07.373 に答える
0

と を使用してphoto_tintdiv を配置するだけです。http://jsfiddle.net/OhMrBigshot/gEdJu/topleft

于 2012-06-23T22:42:38.173 に答える