0

我正在学习如何做 CSS，并且我正在从一个可以在调整窗口大小时缩放图像的模板向后工作。我认为在模板中具有这种效果的类是这个：

.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;

}

你能指出我出错的方向吗？谢谢

4

1 回答 1

0

基本上你的问题不是很清楚。但根据我的理解，事情就是这样。

如果您查看从模板中提供的示例代码，它使用百分比值作为宽度。因此，这些元素的宽度始终与浏览器大小成比例。

例如检查宽度：80%；在下课

.project-link {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #adadad;
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 80%;
    }

使用百分比值是创建响应式设计的方法之一。

于 2013-07-26T14:26:10.173 回答