javascript - 带有图像的 HTML CSS 全屏背景

Question

我正在一个使用全屏背景图像的网站上工作。为了使它适用于所有屏幕类型，我正在使用 jquery backstretch 插件。

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

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

预览页面

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

有没有办法在不将文本与背景分开的情况下解决这个问题？

Answer 1

你可以使用背景尺寸：封面；

{
      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

You could add a semi transparent background to the text when the screen is smaller with a media query

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

Put this code at the bottom of your CSS