元素内联背景图像覆盖x2

Question

我有定义了背景图片的元素：

<a href="#" style="background: url(img/slider-2.jpg) top left no-repeat;">

在CSS中我隐藏了背景：

a {background: none !important;}

然而，现在添加一些响应式设计，我想再次显示背景。 有没有办法指回元素中定义的样式？ 我尝试过操纵，但我没有做任何事情。

a {background: transparent !important;} - didn't work

感谢。

Answer 1

在媒体查询中更具体。如果要强制background:none处于X宽度但希望它以XX较小的宽度显示，则需要在媒体查询中指定该宽度。假设您要隐藏1200和760视口宽度之间的背景（显示大于1200且小于760但不介于两者之间）。然后你需要像这样的复合媒体查询：

@media (min-width: 760px) and (max-width: 1200px) {
    a {background: none !important;}
}

如果您只想让图片以较小的屏幕尺寸显示，则可以使用值较低的min-width。假设您希望它显示为480或者低于480但不会显示大于480的任何屏幕尺寸。您可以执行以下操作。

@media (min-width: 480px) {
    a {background: none !important;}
}

如果可能的话，尽量不要使用内联样式。这是一个非常令人头痛的问题，但如果您无法更改代码的这一部分，使用媒体查询将帮助您实现目标。有关媒体查询的更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries