带有图像的HTML CSS全屏背景

HTML CSS fullscreen background with an image

本文关键字：背景 CSS HTML 图像      更新时间：2023-09-26

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

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

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

预览页面

如果页面宽度下降到1700像素以下，您就会看到问题。

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

您可以使用背景大小：封面

{
      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; 
    }
}

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

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

将此代码放在CSS 的底部

相关文章：