html - 如何在CSS中更改图像禁用状态下的不透明度

Question

我只想在图像处于禁用状态时更改图像的不透明度，就像我在下面为输入 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 />

但如果我在 css 中添加 :disabled ，它不适用于图像。请帮我得到这个。

Answer 1

As stated by 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
• 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.

所以，你不应该使用 :disabled对于图像。你应该找到其他方法。

最好的可能性应该是使用 input带有类型属性的标签 image .

这种方式可以利用disabled属性:

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

<input type="image" 
    src="http://i.stack.imgur.com/AkfB4.png"
    border="0" disabled />

如果你不希望表单在点击时提交，你应该添加onclick="return false;"到 input标签。

---

另一种可能性 as mentioned by @DevonBernard是添加一个禁用类，并使用CSS来获得正确的不透明度。

img.disabled
{
    opacity:0.5;
}

<img src="http://i.stack.imgur.com/AkfB4.png" 
    alt="Image" class="disabled">

---

如果您确实想使用 disabled属性(即使你不应该)，另一种可能性是使用属性选择器:

img[disabled]
{
    opacity:0.5;
}

<img src="http://i.stack.imgur.com/AkfB4.png"
    alt="Image" disabled>

这不是正确的方法，因为 disabled首先不应在图像上使用属性。此外，某些浏览器可能不支持此功能(现在或将来)。