Как разместить изображение за пределами div с прозрачным фоном?

enter image description here Как разместить изображение за пределами div с прозрачным фоном?

Белая часть представляет собой контейнер div, центрированный по горизонтали на веб-сайте. Полосы представляют собой фоновое изображение элемента тела. У меня есть остальная часть гантели в качестве изображения, и я хочу разместить ее за пределами контейнера, чтобы была полная картина.

Обычно это будет позиционирование изображения абсолютно в контейнере div и перемещение его немного вправо.

Но моя проблема в том, что фон всего изображения белый. Таким образом, результат:

enter image description here

Есть ли способ решить эту проблему?

<body> 
    <div id="container"> 
     <div id="pimg"><img src="../images/image_part.png"></div> 
    </div> 
</body> 

html { 
    background-image: url('../images/stripes.png'); 
} 

#container { 
    position: relative; 
    background-color: white; 
    background-image: url('../images/image.png'); // first picture 
    background-repeat: no-repeat; 
    background-position: top right; 
    width: 800px; 
    height: 90%; 
    margin: 0 auto; 
} 

#pimg { 
    position: absolute; 
    top: 0; 
    right: -100px; // second image 
}

источник

2013-11-09 user2251921

Дайте код или образец, чтобы мы могли в состоянии предложить или дать решение вашей проблемы –

Edited, это весь код. – user2251921

Вы можете установить следующий CSS, чтобы скрыть часть изображения, которая идет OutSite в DIV # контейнер

#container 
{ 
overflow:hidden; 
}

выше подход будет обрезать изображение, и если вы не хотите делать, что вы могли бы установить это так, что изображение имеет максимальную ширину одной из него контейнерного

#pimg 
{ width:800px; } 
#pimg img 
{ max-width:100%; }

источник

2013-11-09 11:10:31

Основная проблема заключается в том, что ваш PNG имеет белый фон вместо прозрачного фона, как вы хотите так:

Редактировать «image.png» в графическом редакторе программного обеспечения, как Adobe Photoshop или GIMP
Открыть его в редакторе изображений
Erease фон (потому что у вас есть PNG, да, но у него есть белый фон)
Сохранить изображение в формате PNG или GIF формат, потому что JPEG не поддерживает прозрачный фон
Совет: Photoshop есть возможность сохранить изображение для веб, Control(Command in Mac) + Shift + alt + S, эта опция может помочь вам оптимизировать изображение, корректирующее его параметры

Вот Photoshop учебник: http://www.youtube.com/watch?v=PLA2FaOXkkg

источник

2013-11-09 13:02:29

Как разместить изображение за пределами div с прозрачным фоном?

ответ

Смежные вопросы