Html 如何在css中更改图像禁用状态下的不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35742581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change opacity in disabled state of image in css
提问by Anil kumar
I would like to change opacity of image only when it is in disabled state like i'm doing for input buttonbelow:
我想仅在图像处于禁用状态时更改图像的不透明度，就像我正在为button下面的输入所做的那样：
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 :disabledin css. Please help me to get this.
但它不适用于图像，如果我添加:disabledcss。请帮我得到这个。
回答by Ivar
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
- optgroup elements that have a disabled attribute
- option elements that are disabled
- fieldset elements that have a disabled attribute
Note:This definition is used to determine what elements can be focused and which elements match the :disabled pseudo-class.
如果某个元素属于以下类别之一，则称其实际上已禁用：
- 被禁用的按钮元素
- 被禁用的输入元素
- 选择被禁用的元素
- 禁用的 textarea 元素
- 具有禁用属性的 optgroup 元素
- 禁用的选项元素
- 具有禁用属性的字段集元素
注意：此定义用于确定可以聚焦哪些元素以及哪些元素与 :disabled 伪类匹配。
So, you should not use :disabledfor images. You should to find some other way.
所以，你不应该使用:disabled图像。你应该另寻他路。
The best possibility should be to use an inputtag with the type attribute image.
最好的可能性应该是使用input带有 type 属性的标签image。
This way to can make use of the disabledattribute:
这种方式可以利用该disabled属性：
input[type=image]:disabled
{
opacity:0.5;
}<input type="image"
src="http://i.stack.imgur.com/AkfB4.png"
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 inputtag.
如果您不希望 a 表单在您单击时提交，您应该添加onclick="return false;"到input标签中。
Another possibility as mentioned by @DevonBernardis to add a class disabled, and use CSS to get the opacity right.
@DevonBernard 提到的另一种可能性是添加一个禁用的类，并使用 CSS 来获得正确的不透明度。
img.disabled
{
opacity:0.5;
}<img src="http://i.stack.imgur.com/AkfB4.png"
alt="Image" class="disabled">If you do want to use the disabledattribute (even though you shouldn't) , another possibility is to use the attribute selector by using:
如果您确实想使用disabled属性（即使您不应该使用），另一种可能性是通过使用属性选择器：
img[disabled]
{
opacity:0.5;
}<img src="http://i.stack.imgur.com/AkfB4.png"
alt="Image" disabled>This is not the correct way, since the disabledattribute should not be used on images in the first place. Also some browsers might not support this (now or in the future).
这不是正确的方法，因为首先disabled不应在图像上使用该属性。此外，某些浏览器可能不支持此功能（现在或将来）。
回答by Bruno Kos
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 :disabled 选择器通常用于表单元素（复选框、按钮等），所以如果你想在 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 类的。我认为我不知道图像上的“禁用状态”实际上意味着什么，也许只是单击它后的图像状态，但即使在这种情况下，您也不能使用“禁用”选择器。
回答by mfreiholz
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
最佳曼努埃尔
