Question

我有一个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') css中添加.Images img{}，但它在后台显示透明的png图像。来自html锚标记的图像出现在前面。

这是来自WooCommerce插件的代码，我试图通过在singple forduct图像框中显示的图像上显示修复透明png来覆盖单个pproduct图像。

Answer 1

在<img>上添加包装器html：

<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>

之上

Answer 2

.images { 位置：相对; }

.images .transparent { 内容：''; 位置：绝对; 顶部：0;左：0; 宽度：100％; 身高：100％ }

添加上面的css并将透明类添加到img标记

Answer 3

有很多方法可以做到这一点，但我这样做的首选方法是使用相对或绝对定位将两个图像放在相同的坐标上，然后使用z-index正确分层。具有最高z-index的图像将是顶部的图像。

使用HTML，CSS无法正常使用JPEG的透明PNG

3 个答案: