用图像覆盖整个模态

我正在使用Materialise CSS。我有一个模式，我想将整个背景设置为一个图像（所以当它打开时，它看起来像只是在模糊的网页背景下查看一张漂亮而大的图像）。问题是，当我这样做时，如果模态比它大，图像会重复。用图像覆盖整个模态

我希望图像能够延伸到整个模态。

我的模式：

<div id="imageModal" class="modal"> 
    <div class="modal-content"> 

    </div> 
</div>

CSS：

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-reapeat: "none"; 
    height: 50%; 
    width: 100%; 
}

来源

2016-06-30 unconditionalcoder

您有一些错字与背景重复。试试这个：

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-repeat: no-repeat; 
    height: 50%; 
    width: 100%; 
}

另外，如果你使用CSS3，你可以设置background-size属性cover所以这将有助于根据您的模态大小调整图片的大小。就像这样：

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 50%; 
    width: 100%; 
}

来源

2016-06-30 01:07:37

Hi加在你的风格...

background-repeat: no-repeat;

只是检查并核对其u有背景重复的样式：没有这是三振已经becz没有风格一样，所以只需更换上述一个

来源

2016-06-30 01:09:24

这里尝试了这一点

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-reapeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 50%; 
    width: 100%; 
}

参考

https://css-tricks.com/perfect-full-page-background-image/

来源

2016-06-30 01:31:50

用图像覆盖整个模态

回答

相关问题