悬停缩放背景图片

Question

我有一个div的背景图片，我想在悬停时放大，这是我正在使用的代码

<div class="col-md-6 col-sm-6 col-xs-12 blocks" id="outfit">
    <h3>Cafes and restautrents </h3>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has be
    </p>

    <a class="btn btn-default">View More</a>
</div>

CSS

#outfit{
   background:url(../images/outfit-bg.png) right bottom no-repeat #DFD2C1;
   color:#86A3B1;
   transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
}
#outfit:hover {
  transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE8 */
   filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); /* IE6 and 7 */ 
} 

这是整个div的缩放，我如何只针对该div中的背景图像进行放大

Answer 1

干得好：

#outfit{
   background:url(http://www.intrawallpaper.com/static/images/1968081.jpg) no-repeat ;
   color:#86A3B1;
    background-size: 100%;
   transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
}

#outfit:hover {
  background-size: 150%;
} 

jsFiddle

Answer 2

您可以使用background-size来执行此操作，只需确保在div上设置background-size:100%

 #outfit{ background:url("https://placeimg.com/500/300/animals") right bottom no-repeat #DFD2C1; color:#86A3B1; transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; background-size:100%; } #outfit:hover { background-size:150%; } 

 <div class="col-md-6 col-sm-6 col-xs-12 blocks" id="outfit"> <h3>Cafes and restautrents </h3> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has be </p> <a class="btn btn-default">View More</a> </div>