响应图像的一些最佳实践是什么(例如，对于部分标题)？

时间：2021-04-28 作者：sashaikevich

愚蠢的我让客户上传他们自己的标题图片。我正在检查他们是否上传了一些东西，如果发现了，我会在模板中以内联样式将其添加为背景图像。

但是，如何根据使用的设备交换图像？

通常，我只会添加媒体查询并在css中交换图像，但当它们是内联背景时，我不知道该怎么办。

你是怎么处理的？

1 个回复
SO网友:anton

如果您将背景图像设置为某个内联标记，您仍然可以通过css和媒体查询来控制它，!important 仍在工作=）

<div id="image" style="background:url(image.jpg);">
!important 仍然优先于内联样式，您可以在媒体查询中使用。

#image{
    background:url(another-image.jpg) !important;
}

标签： images   responsive   小码农  

相关推荐

Images with overlay

我有一些图片在一个容器中，我想添加一个覆盖和图标。这不是现成的，但我找到了一些有用的代码：HTML：<div class=\"main\"> <span class=\"featured\"><img src=\"http://joshrodg.com/IMG_001-258x258.jpg\" title=\"\" alt=\"\"></span> </div> CSS：.featured {