У меня есть HTML,

1) У которого есть div с изображениями классов.

HTML

<div class="images">
      <a href="http://dynamicUrl.com/reload.jpg" itemprop="image"   
    class="woocommerce-main-image zoom" 
        title="" data-rel="prettyPhoto[product-gallery]">
        <img width="454" height="600" 
src="http://cutomPicture.com/OK-454x600.jpg" 
class="attachment-shop_single wp-post-image"
 alt="men grey" title="men grey"></a>

CSS: 1)

.single-product .images,

2 )

.images img {
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
  padding: .618em;
  background: #fff;
  border: 1px solid #e8e4e3;
  width: 100%;
}

Этот HTML-код показывает окно и отображает динамическое изображение через динамически сгенерированный URL-адрес.

Я попытался добавить background-image:url('TransparentPicture.png') Inside .Images img{} css, но он показывает прозрачное изображение PNG в фоновом режиме. И изображение из тега привязки в html выходит вперед.

Это код из плагина WooCommerce, я пытаюсь переопределить одно изображение pproduct, показывая исправление прозрачного png поверх изображений, которые показаны в окне одиночного изображения forduct.

3
VeKe 25 Окт 2015 в 05:05

3 ответа

Лучший ответ

Добавьте html-оболочку поверх <img>:

<div class="images">
     <div class="imgWrapper">
      <a href="http://dynamicUrl.com/reload.jpg" itemprop="image"   
    class="woocommerce-main-image zoom" 
        title="" data-rel="prettyPhoto[product-gallery]">
        <img width="454" height="600" 
src="http://cutomPicture.com/OK-454x600.jpg" 
class="attachment-shop_single wp-post-image"
 alt="men grey" title="men grey"></a></div>

Попробуйте добавить эти стили:

.imgWrapper {
  position:relative;
}

.imgWrapper:after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  background-image:url('TransparentPicture.png');
  background-position:center;
}

Это добавляет псевдоэлемент и помещает его поверх <img>

3
Khanh TO 25 Окт 2015 в 02:56

Есть много способов сделать это, но я предпочитаю разместить два изображения с одинаковыми координатами, используя относительное или абсолютное позиционирование, а затем использовать z-index, чтобы правильно их расположить. Изображение с наивысшим z-индексом будет сверху.

0
kojow7 25 Окт 2015 в 03:47

.images {положение: относительное; }

.images .transparent {content: ''; позиция: абсолютная; верх: 0; слева: 0; Ширина: 100%; Высота: 100%}

Добавьте выше css и добавьте прозрачный класс в тег img

0
Mitul 25 Окт 2015 в 02:18