Question

我正在使用全屏背景图片的网站上工作。并按顺序使它适用于我正在使用jquery backstretch插件的所有屏幕类型。

我遇到的问题是背景图像上有一些文字，如果屏幕尺寸变小，背景上的图像和顶部的图像会相互叠加。

这很难解释，所以这里是实际页面;

如果页面宽度低于1700像素，您将看到问题。

有没有办法解决这个问题而不将文本与背景分开？

Answer 1

您可以使用 background-size：cover;

{
      background: url(http://alicantest.info/public/_images/anasayfa_bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

或在媒体查询中使用其他图像

@media screen and (max-width: 1700px) {

    {
          background: url(newImage.jpg) no-repeat center center fixed; 
    }

}

Answer 2

当屏幕较小且媒体查询时，您可以为文本添加半透明背景

@media screen and (max-width: 795px){
    #map_text {
        background: rgba(0,0,0,0.7);
    }
}

将此代码放在CSS的底部

HTML CSS全屏背景与图像

2 个答案: