Question

我正在尝试使浏览器窗口变得更小/更大时，将右侧图像调整为下一页左侧的图像：

http://www.hugoproject.com/test.html

我在左边的图像上使用精灵。我的代码如下：

HTML

<div id="home-projects">
<div id="projects">
    <div class="project-group">
    <div class="project">
     <a href="#" class="HS" class="project-link">Arrow<span></span></a>

                                    </div>
</div>
</div>

CSS

#home-projects {
text-align: center;
overflow: hidden;
position: relative;
}     

 #projects {
    width: 100%;
}

.project-group {
width: 100%;
height: 100%;
position: absolute;
}
    .project {
        float: left;
        text-align: center;
  width: 33.3%;

}
    .project-link {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #adadad;
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 80%;
    }
    .circle .project-link, .circle .project-link .hover {
        border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
    }
    .project-link .hexagon-top {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        border-style: solid;
        border-bottom-color: transparent;
        border-left-color: #dfdfdf;
        border-right-color: #dfdfdf;
        width: 0;
        height: 0;
        z-index: 2;
    }
    .project-link .hexagon-bottom {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        border-style: solid;
        border-top-color: transparent;
        border-left-color: #dfdfdf;
        border-right-color: #dfdfdf;
        width: 0;
        height: 0;
        z-index: 2;
    }
        .project-link .hover {
            position: absolute;
            width: 100%;
            height: 100%;
            font-size: 14px;
            text-align: center;
            color: #fff;
            background: #ec6136;
            text-decoration: none;
            text-transform: uppercase;
            display: block;
            opacity: 0;
            transition: all .3s;
            -moz-transition: all .3s;
            -webkit-transitin: all .3s;
        }
            .project-link .hover-text {
                display: block;
                margin-top: 45%;
            }
            .project-link .hover-text:after {
                content: '>';
                font-family: 'icon';
                font-size: 12px;
                margin-left: 15px;
            }
        .project-link:hover > .hover {
            opacity: .9;
        }

.HS {
display: inline-block;
position: relative;
text-indent: -9999px;
    width: 283px;
height: 213px;
background: url(http://www.hugoproject.com/ftp1/images/icons.png) no-repeat;
}

.HS span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://www.hugoproject.com/ftp1/images/icons.png) no-repeat;
background-position: 0 -214px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition:    opacity 0.5s;
-o-transition:      opacity 0.5s;
}
.HS:hover span {
opacity: 1;
}

我做错了什么？

Answer 1

这会像你想要的那样调整大小（至少在Firefox中，在其他地方测试过）。主要是必须使用％，而不是固定大小才能缩放。

.HS {
 display: inline-block;
 position: relative;
 text-indent: -9999px;
 width: 100%;
 height: 75%;
 background-image: url("http://www.hugoproject.com/ftp1/images/icons.png");
 background-position: 0px 0px;
 background-size: 800%;
}

.HS span {
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 background-image: url("http://www.hugoproject.com/ftp1/images/icons.png");
 background-position: 0px -100%;
 opacity: 0;
 width: 100%;
 height: 100%;
 background-size: 800%;
 -webkit-transition: opacity 0.5s;
 -moz-transition:    opacity 0.5s;
 -o-transition:      opacity 0.5s;
}

.project {
 float: left;
 text-align: center;
 width: 33.3%;
 height:100%;
}

另一个可能更好的选择是将PNG实际裁剪为单独的图像而不是选择位置，以便您可以使用与其他图像相同的CSS。

使用CSS动态调整精灵图像的大小

1 个答案: