仅缩放背景图片

Question

我只想缩放背景图片

 .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); } 

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

这是我的代码，但是在这种缩放效果中，背景效果有效，并且还影响图像中的内容。如何仅对背景图像赋予效果。

Answer 1

您必须更改css部分并使用pesudo elements来获取它

删除html部分中的background-image并在css pesudo element

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