如何在css中改变图像禁用状态下的不透明度

I would like to change opacity of image only when it is in disabled state like i'm doing for input button below:

只有当图像处于禁用状态时，我才会改变图像的不透明度，就像我对下面的输入按钮所做的那样:

input[type="button"]:disabled {
  border: 1px solid #AAA;
  border-radius: 4px;
  opacity:0.5;
}

img:disabled {
  opacity:0.5;
}

Normal button: <input type="button" value="Close" /><br>
Disabled button: <input type="button" value="Cancel" disabled="true"/>
<br><br>
Normal: <img src="http://i.stack.imgur.com/AkfB4.png" /><br>
Disabled: <img src="http://i.stack.imgur.com/AkfB4.png" style="opacity:0.5" disbled />

But it's not working for images, if I add :disabled in css. Please help me to get this.

但是，如果我添加:在css中禁用，它对图像无效。请帮我拿这个。

3 个解决方案

#1

As stated by W3C:

由W3C是这样陈述的:

An element is said to be actually disabled if it falls into one of the following categories:

如果一个元素属于以下类别之一，那么它实际上是被禁用的:

button elements that are disabled

禁用的按钮元素

input elements that are disabled

禁用的输入元素

select elements that are disabled

选择禁用的元素

textarea elements that are disabled

禁用的textarea元素

optgroup elements that have a disabled attribute

具有禁用属性的optgroup元素

option elements that are disabled

禁用的选项元素

fieldset elements that have a disabled attribute

具有禁用属性的fieldset元素

Note: This definition is used to determine what elements can be focused and which elements match the :disabled pseudo-class.

注意:这个定义用于确定哪些元素可以集中，哪些元素匹配:禁用的伪类。

So, you should not use :disabled for images. You should to find some other way.

因此，您不应该使用:禁用图像。你应该想别的办法。

The best possibility should be to use an input tag with the type attribute image.

最好的可能性应该是使用带有类型属性映像的输入标记。

This way to can make use of the disabled attribute:

这样可以利用被禁用的属性:

input[type=image]:disabled
{
    opacity:0.5;
}

<input type="image" 
    src="https://placeholdit.imgix.net/~text?txtsize=56&txt=Example&w=300&h=150&txttrack=0"
    border="0" disabled />

If you don't want the a form to submit when you click it, you should add onclick="return false;" to the input tag.

如果您不希望表单在单击时提交，那么应该向输入标记添加onclick="return false "。

Another possibility as mentioned by @DevonBernard is to add a class disabled, and use CSS to get the opacity right.

@DevonBernard提到的另一种可能性是添加一个禁用的类，并使用CSS使不透明度正确。

img.disabled
{
    opacity:0.5;
}

<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=Example&w=300&h=150&txttrack=0" 
    alt="Image" class="disabled">

If you do want to use the disabled attribute (even though you shouldn't) , another possibility is to use the attribute selector by using:

如果您确实希望使用禁用属性(即使您不需要)，另一种可能是使用属性选择器:

img[disabled]
{
    opacity:0.5;
}

<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=Example&w=300&h=150&txttrack=0"
    alt="Image" disabled>

This is not the correct way, since the disabled attribute should not be used on images in the first place. Also some browsers might not support this (now or in the future).

这不是正确的方法，因为禁用属性首先不应该用于图像。还有一些浏览器可能不支持这个(现在或将来)。

#2

CSS3 :disabled selector is usually used on form elements (checkboxes, buttons, etc), so if you want to apply opacity on img, you should use:

CSS3:禁用选择器通常用于表单元素(复选框、按钮等)，所以如果你想在img上应用不透明度，你应该使用:

img.disabled
{
    opacity:0.5;
}

So it is about the CSS class. I don't think I have an idea what could "disable state" on image mean actually, perhaps only an image state after you clicked it, but even in that case you can't go with "disabled" selector.

这是关于CSS类的。我不知道什么可以“禁用状态”在图像上实际上是什么意思，也许仅仅是点击后的图像状态，但即使这样，你也不能使用“禁用”选择器。

#3

You can also use the CSS selector for "disabled" state, which works fine in my case:

你也可以使用CSS选择器来选择“禁用”状态，这在我的情况下很有效:

button[disabled] > img {
    opacity: 0.5;
}

Best Manuel

最好的曼努埃尔

#1