html - 如何让背景图片完美适配页面

标签 html css

图片没有完美贴合当前页面,如何让背景图片完美贴合页面

 .background-image {
  background-image: url('camera.jpg'); 
  background-size: cover;
  display: block;
  height: 800px;
  left: -5px;
  top:-5px;
  bottom:-5px;
  right: -5px;
position: fixed;      
z-index: 1;
  margin:0px auto;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  }

我试过了,但是不能和模糊一起使用

background: url(images/bg.jpg) no-repeat center center fixed; 

http://jsfiddle.net/vj8skms4/

最佳答案

您缺少背景位置属性;
所以,要使图像在水平溢出时垂直居中,您应该添加:

 background: no-repeat center center fixed;

here's a fiddle

关于html - 如何让背景图片完美适配页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28806985/

相关文章:

css - 更改 Bootstrap 弹出窗口的样式

javascript - 你如何使用 javascript 将 html 元素移动到随机位置?

jquery - Bootstrap 导航栏切换无法正常工作

html - CSS 类可以根据特定子元素是否存在而改变吗?

c# - 如何动态更改 td 内容?

html - 关闭 Adob​​e Brackets 中匹配括号的自动完成功能

css - 在 Ionic `ion-item` 中编辑影子 DOM

html - 在我的 WordPress 中,将短页面的页脚强制置于页面底部

javascript - 如何从 HTML5 输入中删除验证错误?

css - 使用 ui-router 的全屏背景图片