Question

假设我有一个像这样的css的背景元素：

.header-section {
    background      : url('images/siam/home-test.png') no-repeat scroll center center;
    background-size : cover;
}

接下来，我想让这个元素背景大小设置在一个模糊此背景的表单上。因此形式css是：

.form-test {
    position        : absolute;
    background-image:url("images/siam/home-test-blur.png");
    background-repeat:no-repeat;
    @include background-size(cover);
    background-attachment: fixed;

    &.tinted{
        @include background-image(linear-gradient(0deg, transparent,rgba(30, 33, 39,.2)),url("images/siam/home-test-blur.png"));
    }
    &.shaded{
        @include background-image(linear-gradient(0deg,  transparent,rgba(30, 33, 39,.2)),url("images/siam/home-test-blur.png"));
    }   
}

.form-test {
    border        : 1px solid #3B3B3B;
    padding       : 15px 50px;
    top           : -27px;
    width         : 650px;
    z-index       : 1;
    font-family   : 'Roboto Condensed', sans-serif;
    -webkit-box-shadow: 0 12px 18px 0px rgba(0, 9, 22,.9);
    box-shadow: 0 12px 18px 0px rgba(0, 9, 22,.9);
}

但是@include background-size(cover);得到的是一个大小合适，我认为因为我有其他元素background-size: cover设置。问题是如何设置background-size的{{1}} .form-test - .header-section 我想要实现的效果是这样的：Open in CodePen

在css中获取元素背景大小

0 个答案: