问题标签 [background-size]

我在网页顶部有一个横幅，在标题元素上使用背景 css 标签。

HTML：

CSS：

还有另一个用于粘性页脚的 CSS 规则。不确定它是否相关，但我会在这里添加它，以防万一：

这在 Chrome 和 Firefox 中运行良好。但在 Internet Explorer 11 和 10 中，有时无法呈现。但是，当我将光标悬停在菜单项上时，它只会在该元素下呈现。当我说“有时”时，我的意思是我可以敲击 F5 键 30 次，它有时会渲染，有时不会。在我看来是随机的。

我尝试更改图像的名称，以排除任何缓存问题。

在 IE 11 和 10 的三台单独的计算机上进行了尝试。

似乎无法发布我嵌入的屏幕截图，需要至少 10 名声望。所以我将链接到 imgur。

工作：http: //imgur.com/COhiKgx

问题：http: //imgur.com/PMjfzUx

有没有人经历过这样的事情？

编辑：在评论中添加了实时站点 URL。无法在原始帖子中添加更多链接。

我正在应用内联样式的背景，因为它需要使用 PHP 更新：

在某个断点，我需要应用 background-size:contain;

编辑 - 在这种情况下，当与内联 CSS 结合使用时，样式表中的 CSS 似乎不适用。有解决方案吗？

这是一个简单的 jsFiddle -> http://jsfiddle.net/z5r1hwmq/

我想知道是否有办法延迟从“覆盖”到“包含”的背景大小的悬停效果？我已经看到过渡延迟适用于背景颜色和其他属性，但不适用于背景大小。任何帮助将不胜感激。谢谢！

http://jsfiddle.net/rtku7sqk/

更新 也许我应该澄清一下我想延迟悬停效果发生但不延长动画的持续时间。

与此类似... http://dabblet.com/gist/1498443

最近更新

我想出了一种通过混合使用 CSS 和 javascript 来解决这个问题的方法。

这种方式“背景大小”与“包含”和“覆盖”一起使用

http://jsfiddle.net/rtku7sqk/5/

尝试在表格中使用背景尺寸封面并没有得到我想要的结果。

见：http: //jsfiddle.net/pp9st63L/1/

数据列（不包括最左边的列）应该是等宽的，但列数是可变的。有时是 3，有时是 4（包括左标题栏）。

这些数据列的宽度应该相等且足够背景图像可以覆盖。如果对方有长数据。目前，列的宽度纯粹与这些列中的数据有关。我想用 CSS 覆盖这个行为，并设置列的最大宽度并使它们的宽度相等。所以背景大小的封面会起作用。

关于如何让它发挥作用的任何想法？

这可能已经在某个地方得到了回答，但经过一番搜索后我还没有找到。

我有一系列带有背景图像的 div。大小设置为背景大小：封面。

但我希望能够让图像放大并在悬停时增长。这种过渡不适用于它看起来的封面属性。实际上，图像缩放但没有过渡效果。在这种情况下，它会立即从“覆盖”变为 110%。当原始背景大小设置为 100% 时，它工作正常。

但是有了这个，在调整页面大小时，图像似乎有点平铺在 div 后面，这不是我想要的。封面始终保持中心位置，这是我想要的。

任何关于如何随着掩护或相同效果而增长的过渡的建议。

伊尔蒙

在台式机上，iPad 当元素具有时，背景中的图像保持其纵横比background-size: cover，但在我的 Android 手机（chrome）上，图像看起来更像width:100%;height:100%，

你可以在这里看到它的实际效果。

这是我手机的截图

当调整页面的宽度大小时，我只希望徽标在徽标两侧没有剩余空间时开始包含，因此此时调整页面的宽度。一定很容易！在小提琴的例子中似乎表现得像我想要的那样，但我自己的代码并不总是包含背景大小（徽标）。

我想要一个尺寸的徽标中心页面，并在页面宽度达到徽标的两端时调整尺寸。希望你能听懂我的英语。

这里是：小提琴

}

谁能帮我这个？

我正在尝试制作一个非常简单的带有水平滚动条的 HTML 页面，该页面background-size:cover在左侧仅包含一张大图片（带有 ），在封面右侧包含一个带有列的长文本。

我认为我的问题是关于position:relative(with float) 和position:absolute(with left)，但我无法解决它。目前，封面图片OK，显示在左上角。但是文本显示在右下角（而不是封面的右上角）。

请你帮助我好吗 ？

这是展示我所做的演示：http: //jsfiddle.net/kz5ch49w/38/

不会在这个背景上做封面，但是当我做png图像时，它可以工作，我不明白为什么：

我background-size在我的 SASS 中使用了很多，每次我需要使用它时都重复声明。

理想情况下，我想用一个独特的类编写一次声明并将其扩展到其他地方。我在下面尝试了一些方法，但它不起作用。background-size仅当您将其包含在同一规则集中时似乎才有效。

这背后的主要原因是减少 CSS 输出。

这是我通常会写的有效的内容：

这是我想写的，但不起作用：

这可能吗？我已经设置了一支笔来说明这个问题：http ://codepen.io/abbasinho/pen/ZYaGJb