带有图像的 HTML CSS 全屏背景答案

【问题标题】：HTML CSS fullscreen background with an image带有图像的 HTML CSS 全屏背景
【发布时间】：2013-08-26 23:11:19
【问题描述】：

我正在开发一个使用全屏背景图片的网站。并且为了为了使它适用于我正在使用 jquery backstretch 插件的所有屏幕类型。

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

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

preview page

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

有什么办法可以在不将文字与背景分离的情况下解决这个问题？

【问题讨论】：

背景工作正常。唯一的问题是选择与您的内容有冲突的背景。
是的，我知道，但是您有没有其他方法可以解决这个问题。
为小屏幕尺寸使用不同的背景？
你的限制到底是什么？
如果我设法将粉笔书写与背景分开，我可以很容易地让它工作，但在这种情况下我想不出其他方法。为不同的屏幕尺寸使用不同的图像可能会奏效，但我正在寻找更可靠、更简单的解决方案。

标签： javascript jquery html css fullscreen

【解决方案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; 
    }

}

【讨论】：

背景本身工作正常。请看例子。问题是它与上面的内容冲突。我要问的是，有没有其他方法可以解决这个问题。

【解决方案2】：

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

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

将此代码放在 CSS 的底部

【讨论】：