CSS规模转换缓出不起作用（图像已缩放）

Question

我在这里有这个元素：

<div class="item active">
                        <a href="/Awards">
                            <div class="fill awards-banner">
                            </div>
                            <div class="container awards-banner-text">
                                <div class="row">
                                    <div class="col-md-3">
                                        <img src="~/Images/banner-images/banner-text-01.png?v=656546" alt="Awards" />
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

我正在尝试使用变换缓出来缩放背景图像，但不是放宽到缩放，它只是做缩放，一个变换，只是进入全尺度，我希望这是有道理的！

这是我的CSS：

#home .slider .fill.awards-banner {
    background-image:url('/Images/banner-images/banner-01.png');
    background-position: 0px;
    transition: all 50s ease;
  -moz-transition: all 50s ease;
  -ms-transition: all 50s ease;
  -webkit-transition: all 50s ease;
  -o-transition: all 50s ease;
}

#home .slider .item.active .fill {
    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 */ 
}