html - CSS 背景附件和大小

标签 html css background-image background-attachment

我试图让我的图像随着容器内的页面滚动,而不是固定它(我需要它随着滚动上下移动,这样说 :))。我已经知道将图像设置为背景并将背景附件设置为固定应该可行。像这样:

example{
  width: 100%;
  height: 22.312%;
  background-image: url("img/eyepoker.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

首先 - 它不会产生谷歌向我 promise 的效果。有什么建议么?其次,有人能告诉我这是否是将背景图像与其容器相匹配并实现这种效果的最佳做法吗?

[编辑]:尽可能具体:问题是什么都没有发生。就像我从未添加背景附件规则一样。

最佳答案

我建议使用 background-size: cover;

#example {
    width: 100%;
    height: 22.312%;
    min-width: 120px;
    min-height: 80px;
    background-image: url("http://lorempixel.com/1200/800/nature");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 400px 0;
}

http://jsfiddle.net/0r61obph/

关于html - CSS 背景附件和大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31076240/

相关文章:

javascript - 使用 jquery 设置 css 属性

CSS子网格不显示行间隙

jquery - 相对于页面滚动背景

css - 图像设置为 100% 但底部仍有边距

javascript - 无法将旧的 reCaptcha 代码居中

php - 尝试获取非对象的属性: Using SELECT

html - 在带有 Noscript 的 Firefox 中对 html/css 字体使用 @import(Google 字体不呈现)?

html - 响应式 Bootstrap 导航栏

html - 如何为 IE7 和 IE8 指定另一个字体大小

javascript - 页面更改时加载的背景图像