响应式 CSS URL 背景图片答案

【问题标题】：Responsive CSS URL Background Images响应式 CSS URL 背景图片
【发布时间】：2014-05-21 18:04:26
【问题描述】：

我有两个按钮，它们在 CSS 中都有一个背景 URL 属性，因为当用户将鼠标悬停在它们上时源会发生变化。这完美地工作，但必须指定宽度和高度，因此它会在响应式设备上产生问题。删除身高和体重属性时，图片消失。 如何使我的图片在 CSS 中具有响应性？下面的代码和源代码。

网址：http://parion.github.io/

其中一张图片的 HTML：

<a class="sirscribe" href="http://www.youtube.com/channel/UCaAlh3Iy7rAcO3MgD_O3Kkg?sub_confirmation=1"></a>

其中一张图片的 CSS：

a.sirscribe{
    background:url(http://nikcooper.com/img/Box-sirscribe.png) center top no-repeat;
    height:180px;
    width:480px;
    display:block;
    margin: 0 auto;
}
a.sirscribe:hover{
    background:url(http://nikcooper.com/img/Box-sirscribe-activated.png);
}

图片：

【问题讨论】：

您可以使用background-size: 100% auto;、background-size: auto 100%; 或 background-size: cover;
看，我已经尝试过这些，但是图像需要高度或宽度才能显示。如果我把这些参数放进去，图像就会拒绝调整大小。
背景大小的封面强制图像填充容器的 100% 高度/宽度。您不需要在图像本身上设置高度/宽度，但您确实需要在容器上设置高度/宽度，这是没有办法的。
另外，我建议为悬停效果使用图像精灵，它可以消除加载悬停图像时图像消失的瞬间。

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

设置容器的大小（您的a 元素）。您可以使用 max-width 和/或 max-height 使其响应。然后将其添加到 CSS 中：

a.sirscribe{
    background:url(http://nikcooper.com/img/Box-sirscribe.png) center no-repeat;
    background-size:contain;
    height:180px;
    width:480px;
    display:block;
    margin: 0 auto;
}

【讨论】：

你能告诉我你设置容器大小和使用 max-width min-width 属性的方法吗？
这真的取决于你的布局。如果您没有明确设置 a 元素的宽度和高度，则大小将为零 - 这就是您看不到图像的原因。您可以以百分比、ems 或 rems 设置大小，并使用 max-width 来防止它在大屏幕上变得太大。或者，如果您希望从外部容器派生大小，则可以使用绝对定位。
甜蜜！实际上，我只删除了宽度属性，它开始填满整个网格。谢谢！

【解决方案2】：

a.sirscribe{
    background:url(http://nikcooper.com/img/Box-sirscribe.png) center top no-repeat;
    background-size: contain;
    /* otherwise try 
     * background-size: cover;
     * background-size: 100%;
    */
    height:180px;
    width:480px;
    display:block;
    margin: 0 auto;
}
a.sirscribe:hover{
    background:url(http://nikcooper.com/img/Box-sirscribe-activated.png);
}

【讨论】：

你的方法都不起作用。当我删除高度和宽度参数时，它们也不起作用。