как разместить изображение позади другого изображения с прозрачным фоном

0

У меня есть квадратное квадратное изображение с красной полосой, которая проходит вдоль левой стороны и имеет прозрачный фон (белый бит), который я создал в Photoshop. Я хотел бы разместить изображение за этой рамкой. Я попытался установить position:absolute и z-index: -1; однако он помещает изображение за все. Есть ли способ, которым я могу добиться этого только с помощью CSS? PS Я искал решения, но те, с которыми я столкнулся, вроде бы не помогли мне вообще.

Изображение 174551

CSS:

#boxes img {
            border:1px solid;
            margin:4px 0 0 0px;
            padding:0;
            position: absolute;
            width: 359px;
            height: 218px;
            z-index: -1 ;
           -moz-border-radius-topright:5px;
           -moz-border-radius-topleft:5px;
           -moz-border-radius-bottomright:5px;
           -moz-border-radius-bottomleft:5px;
           -webkit-border-top-right-radius:5px;
           -webkit-border-top-left-radius:5px;
           -webkit-border-bottom-right-radius:5px;
           -webkit-border-bottom-left-radius:5px;

 }

#boxes .box {
           width:370px;
           height:241px;
           float:left;
           background-image:url(../imgs/box_front.png);
           background-repeat:no-repeat;
           background-color:#FFF;
           margin:80px 30px 0 0;

}
  • 0
    Поместите z-index на все ваши элементы и присвойте каждому элементу правильный индекс. Чем больше индекс, тем больше будет элемент сверху.
Теги:

1 ответ

2
Лучший ответ

Вы не можете надежно установить z-index без установки position на своих элементах; укладка также относится к контейнерам элементов, поэтому, если все находится на корневом уровне, изображение с отрицательным z-index исчезнет за страницей. (Лично я стараюсь избегать отрицательных значений z-index когда это возможно.)

#boxes {
    position: relative;
}

#boxes img {
    border:1px solid;
    margin:4px 0 0 0px;
    padding:0;
    position: absolute;
    width: 359px;
    height: 218px;
    z-index: 1 ;
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
 }

#boxes .box {
    width:370px;
    height:241px;
    float:left;
    background-image:url(../imgs/box_front.png);
    background-repeat:no-repeat;
    background-color:#FFF;
    margin:80px 30px 0 0;
    position: relative;
    z-index: 2;
}

РЕДАКТИРОВАТЬ:

Проблема в том, что ваш HTML структурирован, поэтому красная полоса - это фоновое изображение контейнера, в который вы загружаете изображение. Поскольку это также имеет background-color, изображение теряется за ним.

Лучшим способом сделать это будет использование естественного потока документов HTML/CSS, т.е. Чем позже элемент появится в HTML, тем выше он находится в естественном z-индексе. Это будет означать, что вам не нужно указывать значения z-index, но вам нужно будет добавить презентационный div в ваш код (если вы не хотите обезьяны с помощью :after псевдоэлементов):

Каждый серый квадрат должен выглядеть следующим образом:

<div class="grey box">
    <h3><a href="#">Stationary</a></h3>
    <a href="#" class="normal"><span class="border">&nbsp;</span><img src="http://placekitten.com/g/361/220"><div class="innerBox">&nbsp;</div></a>
</div>

... и ваш CSS должен измениться. Удалите фон из стилей .box и добавьте это в свой CSS:

#boxes .innerBox {
    position: absolute;
    left: 0;
    top: 0;    
    width:370px;
    height:241px;
    background-image:url(http://i754.photobucket.com/albums/xx182/rache_R/box_front_zps196242cf.png);
    background-repeat:no-repeat;
}

Затем вы можете удалить z-index из #boxes.box и потому, что после изображения в вашей разметке будет отображаться div innerBox, он, естественно, окажется выше вашего изображения.

Если вы не можете добавить какой-либо дополнительный HTML-код в свой шаблон разметки, вы можете перераспределить border div, которые, похоже, не очень много:

#boxes .border
{
    border:none;
    z-index:1;
    cursor:pointer;
    position: absolute;
    left: 0;
    top: 0;    
    width:370px;
    height:241px;
    background-image:url(http://i754.photobucket.com/albums/xx182/rache_R/box_front_zps196242cf.png);
    background-repeat:no-repeat;
}

Вам также необходимо обновить свои изображения:

#boxes img {
    /* other declarations */
    position: absolute; 
    left: 4px; 
    top: 0;
    /* other declarations */
}

... и убедитесь, что ваш #boxes.box style имеет position: relative; задавать.

Это должно сделать вас: http://jsfiddle.net/mr3Fq/4/

  • 0
    Это работает для меня, однако, у меня есть три коробки на одной странице, и по какой-то причине он просто поместил все три коробки друг на друга
  • 0
    Я обновил код; это работает лучше?
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню