1

このページでは、画像の下の div に光沢のある効果のある画像があります。

http://www.joelin.org/home2.html

私は基本的に画像の上に光沢のある効果を移動したいと考えています。私は試した

1) スタイルを img タグに直接追加しますが、効果はありません 2) 画像の周りに div を作成し、その中に光沢のある div を配置します (しかし、光沢のある div は画像の下に配置されました)

他の考えはありますか？

4

2 に答える 2

3

あなたが達成しようとしているのは、このhttp://dabblet.com/gist/3610138のようなものですか?

HTML:

<a href='#' class='img-wrapper'>
    <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg'>
</a>

CSS:

.img-wrapper, .img-wrapper img {
    display: inline-block;
    position: relative;
    width: 13em;
    height: 8em;
    border-radius: 1em;
}
.img-wrapper:after {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 1em;
    box-shadow: inset 0 1em 0 0 rgba(192, 192, 192, .5);
    pointer-events: none; /* so that you can get image from right-click menu
                                won't work in IE and Opera */
    content: '';
}

img タグが不要で、画像を背景画像として使用できる場合は、簡単になります。1 つの要素のみ:

<div class='glossy'></div>

そしてちょうどこのCSS：

.glossy {
    width: 13em;
    height: 8em;
    border-radius: 1em;
    background: linear-gradient(rgba(192, 192, 192, .5) 12.5%, transparent 12.5%),
        radial-gradient(100% 100%, transparent 71%, rgba(192, 192, 192, .5) 71%) 
            no-repeat 0 1em,
        radial-gradient(0% 100%, transparent 71%, rgba(192, 192, 192, .5) 71%) 
            no-repeat 100% 1em,
        url(http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg);
    background-size: 1px 100%, 1em 1em, 1em 1em, cover;
}
于 2012-09-03T15:41:30.360 に答える
1

div の絶対配置を使用して、画像の上に配置することができます。適切にレイヤー化するには、z-index も使用する必要があります。次のようなことを試してください：

.imageClass
{
    z-index: 1;
}

.glossyDiv
{
    position: absolute;
    top: 999px;
    left: 999px;
    z-index: 5;
    /* you'll need to figure out where your image sits in relation to the
    top and left of the screen, replace the 999s with the correct values */
}

それは画像の上にdivを取得する必要があります。これを変更して、HTML が設定されている場合は、div がコンテナーに対して相対的に配置されるようにすることができます。

z-index は、要素がどのようにレイヤー化/スタックされるかを制御するため、div をより高いインデックスに設定すると、画面の「前面」に近づき、数値を小さくすると背面に設定されます。z-index は「配置された」要素ソースでのみ機能することに注意してください

于 2012-09-03T15:30:08.033 に答える