Question

是否可以在设置为百分比（100％）的容器中设置最小背景大小，背景设置为覆盖整个容器（div）。

当您重新调整浏览器窗口大小时，容器（div）会重新调整大小，因为它设置为100％，并且背景图像也会重新调整大小。

这是我想尝试的是可以设置最小背景大小，因为当您将浏览器窗口调整为较小时，无法看到背景。

这是我的示例代码：

HTML

<div class="fullwidth_wrapper fullbg">

    <div class="content">
        <h3>How to set minimum background size</h3>
    </div>

</div>

我的css

.fullwidth_wrapper {
    width: 100%;
    height: 720px;
}

.fullwidth_wrapper.fullbg {
    background: url('http://dummyimage.com/1080x620/d1d1d1/0064c2.png') no-repeat top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    display: block;
    background-size: 100%;
    /* can we use something like min-width or like min-background-size??? */
}

在这里查看我的JSFIDDLE http://jsfiddle.net/gqm2rbgn/7/

Answer 1

使用background-size:50% 50%或类似的内容而不是封面 - 这会将背景调整为更小

如果您不希望在较小的设备上看到它，那么添加一个说背景的媒体查询：#fff repeat或类似这样的行：

@media screen and (max width:480px){background:#fff repeat;}

有没有办法在css / html中设置最小背景大小

1 个答案: