Question

我有一个简单的div，我将鼠标悬停在其中以增加背景图片的大小。

除非我快速移入和移出鼠标，否则它会起作用，有时候图像会反复出现，而不是再次平滑地增长和缩小。

这是CSS：

.block__left {
            background: url("http://tpwd.texas.gov/state-parks/big-bend-ranch/gallery/Big-Bend-Ranch-Camping-_U8E2700.jpg") no-repeat;
            background-position: right -500px bottom -30px;
            width: 100%;
            height: 600px;
            -webkit-transform: scale(1, 1); 
            -ms-transform: scale(1, 1);
            transform: scale(1, 1);
            -webkit-transition: all 0.6s ease-in-out;
            transition: all 0.6s ease-in-out;
        }
.block__left:hover {
            -webkit-transform: scale(1.1, 1.1); 
            -ms-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
        }

Here is a fiddle

问题是：如何让每次都顺利？

我正在使用Chrome进行测试。

Answer 1

这会有用吗？

.block__left {
  backface-visibility: hidden;
}

悬停时的背景图像比例 - 每次都不平滑

1 个答案: