0

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

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

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

4

2 回答 2

0

我相信这应该做你想要的：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/）包括向后兼容前缀。

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

于 2013-03-23T00:22:07.543 回答
0

在你的CSS中，你把

background-position: "center center";

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

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

将 div 居中放在中间，应该没问题

于 2013-03-23T00:35:25.983 回答