Question

我正在尝试扩展图像的左侧和右侧。例如，如果图像大小为1100px宽度，则部分左右将扩展。我不想进行完整图像扩展。

<div class="side_left"></div>
<div class="mid_container"></div>
<div class="side_right"></div>

在这里，您可以看到我的代码： http://jsfiddle.net/squidraj/EgHGm/

Answer 1

我相信这应该做你想做的事：http://jsfiddle.net/hLMTW/

.mid_container {
    background: url(http://www.jeffreyhomesinc.com/images/banner%202.png) -35px 0 no-repeat;
    height: 245px;
    margin: auto 35px;
    width: 1030px;
    float:left;
}

.mid_container:hover {
    background-position: 0 0;
    margin: 0;
    width: 1100px;
}

如果您更喜欢为过渡设置动画，可以使用CSS动画：

.mid_container:hover {
    background-position: 0 0;
    margin: 0;
    width: 1100px;
    animation-duration: 3s;
    animation-name: slide;
}

@keyframes slide {
    from {
        background-position: -35px 0;
        margin: 0 35px;
        width: 1030px;
    }
    to {
        background-position: 0 0;
        margin: 0;
        width: 1100px;
    }
}

当然需要注意的是，悬停效果在低级浏览器中根本不起作用，尽管它的最新版本中的所有主要浏览器都支持它。您可以通过使用-moz和-webkit前缀复制它来扩展对效果的支持。这个小提琴（http://jsfiddle.net/hLMTW/5/）包含向后兼容性前缀。

如果它能解决您的问题，请接受答案。

Answer 2

在你的CSS中，你把

background-position: "center center";

。它会将您的背景图像居中到中心

剩下的就是扩展div http://jsfiddle.net/EgHGm/1/

将div放在中间位置，它应该没问题

onmouseover将图像边向左右扩展

2 个答案: