前一段时间我遇到了这个问题:
CSS set background-image by data-image attr
如果我正确理解了这个问题,OP需要能够在某些HTML元素上设置属性,并使随附的CSS将其解释为这些元素的背景图像的URL。
我最近遇到了类似的情况,其中一个元素的背景图像在此之前一直是静态的,它被改为从数据库中获取可变图像。我考虑了几个选项,但是,其中,用<img>
元素替换受影响的元素有几个不受欢迎的副作用,构建动态.css文件似乎有点矫枉过正,所以我尝试使用自定义data-
属性和CSS& #39; s attr()
函数将其绑定到元素background-image
,但由于attr()
在不同浏览器中的实现受到限制,因此无法正常工作。
在我的情况下,我最终决定从数据库提供的背景图像是内容而不是设计并采用看起来最简单的方法,因为浏览器已经支持内联CSS样式已经有一段时间了:我应用了所有非 - 变量样式作为规则在单独的样式表上,但我将变量background-image
保留为需要应用的元素中的内联样式。
由于我所指的问题中没有一个回答建议使用内联CSS样式,我自己这样做了,而my answer已被多次投票,没有任何关于原因的推理。我知道downvotes不合理,我对此很满意,但我担心没有看到一些明显的警告,等到我最不期望的时候会咬我。
我已阅读SO帖子What's so bad about in-line CSS?,using inline css - a no-no or okay in certain situations?和Inline styles vs styles in CSS,以及有关使用情况的一些外部讨论,例如https://teamtreehouse.com/community/when-is-inline-css-a-good-idea和https://www.thoughtco.com/avoid-inline-styles-for-css-3466846内联CSS,我从中收集或多或少的以下内容:
我认为我理解这些讨论中给出的论点,但他们似乎都没有考虑应用动态内联样式的情况,因此它们无法有效地解决我的问题。根据我自己的经验,
尽管如此,我真的很想知道为什么这是个坏主意。在哪些方面我可以期望这个决定(使用内联CSS将元素的background-image
样式设置为来自数据库的值)会回来困扰我?
由于