html - 使用 HTML 的 JPEG 上的透明 PNG，CSS 不起作用

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 呈现动态图像。

我尝试在 .Images img{} CSS 中添加 background-image:url('TransparentPicture.png') 但它在背景中显示透明的 png 图像。来自 html 中 anchor 标记的图像位于前面。

这是来自 WooCommerce 插件的代码，我试图通过在单个 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> 之上