Question

我只想缩放背景图片

＆＃13;

.prod_img:hover {
  webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -o-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}

.prod_img {
  content: ' ';
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  height: 580px;
  width: 300px;
}

.protransparentbg {
  position: absolute;
  background: rgba(51, 51, 51, .8);
}

＆＃13;

<<div id="prod_main">
  <div id="product_content">

    <li class="prod_img prod_img1" id="prod_img1" style="background-image: url(http://images.all-free-download.com/images/graphicthumb/beautiful_landscape_picture_02_hd_pictures_166284.jpg);background-size: cover;background-position: center center;">
      <div class="protransparentbg">
        <h4 class="">FIBER FLOOR MAT</h4>
      </div>
    </li>



  </div>
  </div>

＆＃13;

这是我的代码，但在此缩放效果适用于背景图像，它也影响image.how中的内容，仅对背景图像产生效果。

Answer 1

您必须更改css部分并使用background-image来获取它

删除html部分中的pesudo element并在css .prod_img { -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; height: 580px; width: 300px; position: relative; } .prod_img:before { content: ' '; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url(http://images.all-free-download.com/images/graphicthumb/beautiful_landscape_picture_02_hd_pictures_166284.jpg); background-size: cover; background-position: center center; " } .protransparentbg { position: absolute; left: 20px; background: rgba(51, 51, 51, .8); } .prod_img:hover:before { webkit-transform: scale(1.04); -moz-transform: scale(1.04); -o-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04); -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; }

中使用它

<div id="prod_main">
  <div id="product_content">
    <li class="prod_img prod_img1" id="prod_img1">
      <div class="protransparentbg">
        <h4 class="">FIBER FLOOR MAT</h4>
      </div>
    </li>
  </div>
</div>

with totalcar
(
select car, count(*) nb
from yourtable
group by car
)
select * from yourtable f1 inner join totalcar f2 on f1.car=f2.car
where f1.id=1 and f2.nb=4

仅缩放背景图像

1 个答案: