javascript 带有图像的 HTML CSS 全屏背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18447129/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML CSS fullscreen background with an image
提问by user1778459
I'm working on a website which uses a fullscreen background image. And in order to make it work on all screen types I'm using jquery backstretch plugin.
我正在开发一个使用全屏背景图像的网站。为了使其适用于所有屏幕类型，我正在使用 jquery backstretch 插件。
The problem I have is the background image has some text on it and if the screen size gets smaller, the image on the background and the image on top overlays each other.
我的问题是背景图像上有一些文字，如果屏幕尺寸变小，背景图像和顶部图像会相互重叠。
It's rather difficult to explain so here is the actual page;
解释起来相当困难，所以这里是实际页面；
if the width of the page goes down below 1700 pixels you'll see the problem.
如果页面宽度低于 1700 像素，您就会看到问题。
Is there any way to solve this problem without separating the text from the background?
有没有办法在不将文本与背景分开的情况下解决这个问题？
回答by Gildas.Tambo
you can use 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;
}
or use an other image in media query
或在媒体查询中使用其他图像
@media screen and (max-width: 1700px) {
{
background: url(newImage.jpg) no-repeat center center fixed;
}
}
回答by Kevin Lynch
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
将此代码放在 CSS 的底部
