如何使用！重要规则覆盖图像背景 [英] How to use !important rule to overwrite image background

问题描述

hi;

我有一个博客博客，其中我使用.post-body img属性设置帖子中所有图像的背景图像，我在模板中使用了它.

hi;

i have a blogger blog, in which i have used .post-body img attribute to set background image for all images in posts,i have used it in template.

.post-body img{
padding: 15px;
background: white url(http://2.bp.blogspot.com/_v5IxGTiMTD8/S-fvVo_2M5I/AAAAAAAABYU/BefAQpEmaCQ/s1600/grad.png) top repeat-x;
border: 1px solid #DEDBD1;
margin: 5px 5px 5px 5px;
}

但是由于某些原因，我不想在帖子图像中使用背景图像，所以我发现要使用！important规则并将其添加到新的帖子图像属性中，但是它不起作用，

but due to some reasons in some posts i don''t want to use background image in post images, so i found !important rule to use for it and add it in new post image attribute, but it does not work,

<pre><span class="style28"><img height="30" src="http://www.website.com/features/1.gif" background-image: none !important; style="border: 0px; height: auto; max-width: 100%;" width="30" />&nbsp;All popular browsers and applications are supported!</span>

但它不起作用，因此请帮助我正确使用它.
Thanks

but it does not work, so please help me to use it properly.
thanks

推荐答案

!important如果用于覆盖更高优先级的属性，而不是用于更高级别的属性.一个例子: style 属性中指定的内容将覆盖css类中指定的内容.同样， class 属性中的CSS类名称顺序也弄乱了有效样式.同样，直接规范将覆盖级联的规范.但是，如果您的外部元素具有任何CSS规范，而内部元素具有另一个CSS规范，则内部规范将简单地覆盖继承的元素.因此，您有多种选择.
但是，如果没有其他更高优先级的规范，无论如何指定background-image: none !important;都会起作用.

更新:
根据发布的代码，您正在错误地使用样式.

!important if for overriding higher priority attributes, and not for higher level attributes. An example: something specified in the style attribute overrides what''s specified in the css class. Also css class name order in the class attribute is messing up the effective style. As well direct specification will override cascaded one. But if you have an outer element with any css specification and an inner element with an other one, the inner specification will simply override the inherited one. So you have multiple choices.
But anyway specifying background-image: none !important; will have it''s effect, if any other higher priority specification is not available on place.

Update:
According to your code posted, you are using the style in a wrong manner.

<span class="style28"><img height="30" width="30" src="http://www.website.com/features/1.gif" style="border: 0px; height: auto; max-width: 100%; background-image: none !important;" />All popular browsers and applications are supported!</span>

毕竟，混合CSS，内联样式和内联格式设置属性是不明智的.

After all it is not wise to mix css, inline style and inline formatting attributes.

尝试:

#example {
    background-image: none !important;
}

看看这些以了解更多信息:
CSS重要规则 [ ^ ]
在CSS中使用！important [！重要的CSS声明:如何以及何时使用它们 [使用！important时是正确的选择 [

Have a look at these to know more:
The CSS Important rule[^]
Using !important with CSS[^]
!important CSS Declarations: How and When to Use Them[^]
When Using !important is The Right Choice[^]

这篇关于如何使用！重要规则覆盖图像背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！