Прозрачный PNG в качестве фонового изображения

Question

У меня есть элемент с прозрачным png в качестве фонового изображения - это как поляроид с вырезанным битом фотографии, так что отображается только рамка.

Имея это в качестве фона, я хочу, чтобы стандартное изображение находилось позади элемента с прозрачным фоном png - чтобы поместиться внутри рамки.

Я попытался установить z-indexing и opacity, и хотя я могу заставить изображение отображаться через его явно прозрачный из-за настроек opacity.

Есть идеи?

Answer 1

Если .yourPhoto является фоновым изображением, вы можете сделать это:

<div class="yourPhoto">
    <div class="yourPNGframeImage">
    </div>
<div>

Или вы можете использовать встроенные изображения и позиционировать как абсолютные:

 <div class="container">
      <img class="yourPhoto" src="">
      <img class="yourPNGframeImage src="">
 </div>

.container {position: relative;}
.yourPhoto, .yourPNGframeImage {position: absolute; top: 0px; left: 0px;}

Answer 2

есть несколько вещей, на которые стоит обратить внимание при выполнении PNG.

1. при резке убедитесь, что вы фон выключен.
2. экспорт в формате png24.
3. если вы в ie6 вам нужно будет использовать что-то вроде двойного спирального исправления png
4. http://www.twinhelix.com/

Попробуйте эти шаги. Вам не нужно менять непрозрачность вашего изображения, так как это повлияет на все изображение. Когда вы используете z-indexing, вы также должны вставить элемент position css