I created a div element and tried to change its background-size property to 100% auto, but it didn't work (I'm currently using chrome 47). Why can't I do this? How can I fix it?

Fiddle

Example code above changes background-size properties of two elements to auto 100% and 100% auto. My code prints

animate()如果要更改宽度或高度，但不能同时更改两者，如何在 div 的背景大小上使用 JQuery 。

例如，如果我想改变宽度，像下面这样的工作吗？

我在 SO 上找不到与此类似的问题

我正在使用 skrollr 创建缩放效果，与此非常相似。

我使用的背景图像是 SVG，通过将背景大小从非常高的值 (>2500%) 更改为 100% 来应用缩放效果。现在，一切正常，预计 CSS 属性“背景大小”似乎是有限的。我不能应用高于 ~2600% 的值。如果我这样做，根据浏览器的不同，背景图像将被移动或根本不会显示。

出现的问题是，对于一个固定值（例如 2500%），取决于用户拥有的屏幕尺寸和分辨率，图像可能无法正确显示（或根本不显示，如上所述）。有没有办法根据屏幕尺寸和分辨率来计算可能的最高背景尺寸，以便正确显示图像？

JSFiddle

CSS：

HTML：

这是原始图像（2880 x 900）：

以下是它在渲染页面 (1280 x 500) 上的显示方式：

1280 x 500 是<div>包含图像作为背景的尺寸。如果您注意到，渲染的背景会被裁剪而不是缩小以适合小于原始图像的 div。我的理解是 abackground-size: cover是为了在不裁剪的情况下放大或缩小图像。为什么它不起作用？

HTML

CSS

另一个页面上完全相同的标记工作得很好！这两个页面具有用于片段的完全相同的标签。有没有办法通过 CSS 解决这个问题？如果是这样，如何使用 JS 来做这件事（如果可能的话，我真的很想避免这种情况）。

我目前正在尝试为我正在开发的这个玩具应用程序设置背景图像。通过查看 SO，我看到推荐以下代码：

然而，图像质量在我的桌面上看起来仍然很糟糕。图像的原始尺寸为 168px(h) 和 300px(w)。

任何帮助表示赞赏！

所以我的css代码如下：

我想知道，对于第一张图片（silverleaf.png） - 我将如何background-size使用像素（对于 silverleaf）或auto？我尝试使用background-size标签，但它会调整上面定义的所有背景的大小。

我正在尝试制作一个带有附加 a:hover 的背景图像的菜单。我有不同大小的菜单链接，所以我想我可以让图像的一部分左对齐另一个右对齐，以及一个可以拉伸的中心图像，当我应用它们时，它会按照我喜欢的方式工作，除了当你第一次将鼠标悬停在它上面时，整个图像向下滑动几个像素到位。当我只使用一张背景图片时我遇到了同样的问题我在使用背景大小包含时遇到了同样的问题。这发生在 Chrome、Firefox 和 Ie 中。Windows 7的。

我想知道 CSS 中是否有任何方法可以使背景图像的父 div 适合图像大小？出于某种原因，当我使用：

背景尺寸：封面；

我的图像变得模糊，因为它正在以某种方式缩放......

我正在尝试为移动设备制作背景图片，例如：

在 Chrome 开发人员的工具中，它看起来不错，但在真实设备（屏幕尺寸较小）上则不然。为什么会这样，我该如何解决这个问题？

快照：

我正在努力缩短背景图像位置（中心中心）和背景大小（封面）的 CSS 代码。

每当我使用以下代码时，它都可以正常工作，显然：

HTML：

CSS：

我想缩短/删除中心中心和覆盖属性的多个 CSS 重复（因为我有多个横幅 ID，但具有重复的背景设置），但是以下代码不能正确居中并覆盖图像：

HTML：

CSS：

我究竟做错了什么？