Question

我正在学习如何使用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;

}

请你指点我出错的方向？谢谢

Answer 1

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

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

E.g。检查宽度：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%;
    }

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

使用页面调整大小在CSS中拉伸图像

1 个答案: