So ändern Sie die Deckkraft im deaktivierten Zustand Bild im css

Möchte ich ändern Deckkraft des Bildes nur, wenn es im disabled-Status wie ich mache für den Eingang button unten:

CSS:

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

img:disabled {
  opacity:0.5;
}

HTML:

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 />

Aber es funktioniert nicht für Bilder, wenn ich :disabled im css. Bitte helfen Sie mir, diese zu bekommen.

  • Ich sehe keine Bild hier.
  • Können Sie Ihre vollständigen html code mit dem Bild? Das wäre eine gute Hilfe!
  • Was meinst du mit "Bild im deaktivierten Zustand"? Behinderte ist in der Regel verwendet auf form-Elemente.
  • Ich Stimme mit Bruno. Das disabled-Attribut ist eigentlich nur für Formular-Elemente. Warum nicht einfach img.disabled und <img class='diabled' src=''/>?
  • Hallo bruno, ich bin der Durchführung onClick-event auf das Bild. Also, in einigen Fällen bin ich mir nicht erlauben, Benutzer zu führen, das Ereignis in diesem Fall bin ich nur das deaktivieren der Bild. Um den Unterschied zu zeigen, um Benutzer, dass es deaktiviert ist ich wie ändern Sie die "Deckkraft" gefällt mir " - Schaltfläche oben gezeigt.
  • In diesem Fall könnten Sie buttons erstellen mit image-Hintergründe, buttons, text und Rahmen entfernt.
  • dazu habe ich, um alles zu ändern richtig?
  • hi @ketan, finden Sie die änderungen
  • Danke @ivar, es ist in Ordnung, die in IE10, aber ich beobachtete, dass auch Behinderte, die nicht auf Bildern in anderen Browsern

InformationsquelleAutor Anil kumar | 2016-03-02
  1. 10

    Wie bereits von W3C:

    Einem element gesagt wird, um tatsächlich deaktiviert, wenn es fällt in eine der
    folgenden Kategorien:

    • button-Elemente, die deaktiviert sind,
    • input-Elemente, die deaktiviert sind,
    • wählen Sie die Elemente, die deaktiviert sind,
    • textarea-Elemente, die deaktiviert sind,
    • optgroup-Elemente, die über ein disabled-Attribut
    • option-Elemente, die deaktiviert sind,
    • fieldset-Elemente, die über ein disabled-Attribut

    Hinweis: Diese definition wird benutzt, um festzulegen, welche Elemente fokussiert werden kann und welche Elemente übereinstimmen :disabled pseudo-Klassen.

    Also, sollten Sie nicht verwenden :disabled für Bilder. Sollten Sie einen anderen Weg finden.

    Die beste Möglichkeit sein sollte, verwenden Sie ein input - tag mit dem type-Attribut image.

    Diese Weise können die disabled Attribut:

    CSS:

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

    HTML:

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

    Wenn Sie nicht wollen, eine form zu übertragen, wenn Sie darauf klicken, sollten Sie onclick="return false;" zu den input tag.

    Andere Möglichkeit wie bereits von @DevonBernard ist eine Klasse Hinzugefügt werden deaktiviert, und verwenden Sie CSS, um die Deckkraft Recht.

    CSS:

    img.disabled
{
    opacity:0.5;
}

    HTML:

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

    Wenn Sie wollen, zu verwenden, die disabled Attribut (obwohl Sie nicht sollte) , eine andere Möglichkeit ist die Verwendung des Attribut-Selektor mit:

    CSS:

    img[disabled]
{
    opacity:0.5;
}

    HTML:

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

    Ist dies nicht der richtige Weg, da die disabled Attribut sollte nicht verwendet werden, die auf Bilder in den ersten Platz. Auch einige Browser unterstützen möglicherweise nicht dieser (jetzt oder in der Zukunft).

    • mit Bild als <input type="image"> deaktiviert die Arbeit in anderen Browsern auch
    • ich glaube, Sie sind falsch, ich meine vor return false; nur muss ich noch den rest des onclick-events
    • Ja, du hast Recht. Die return hält der rest des Javascript. Die return false; sollte am Ende.
    • Also, wir können das Bild verwenden als input-element. Dann warum können wir nicht betrachten, wie das form-element?
    • Denn in diesem Fall ist es nicht als ein normales Bild, aber als einen submit-button, repräsentiert durch ein Bild.
    InformationsquelleAutor Ivar
  2. 1

    CSS3 :deaktiviert-Selektor ist in der Regel verwendet auf form-Elemente (Checkboxen, buttons, etc), so dass, wenn Sie sich bewerben möchten Deckkraft auf img, die Sie verwenden sollten:

    img.disabled
{
    opacity:0.5;
}

    So ist es über die CSS-Klasse. Ich glaube nicht, dass ich eine Idee haben, was könnte "disable-Zustand" auf das Bild tatsächlich bedeuten, vielleicht nur ein Bild Stand, nachdem Sie es angeklickt, aber selbst in diesem Fall können Sie nicht gehen mit "disabled" - Selektor.

    • Aber ich habe viele Bilder, wie das, gibt es irgendeine andere Möglichkeit, dies zu tun, anstatt das hinzufügen von Klasse zu jedem Bild?
    • Gibt es nicht, weil, wie andere auch erwähnt, deaktiviert funktioniert nicht mit nichts, aber form-Elemente.
    InformationsquelleAutor Bruno Kos
  3. 0

    Können Sie auch verwenden, der CSS-Selektor für die "deaktivierten" Zustand, das funktioniert in meinem Fall:

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

    Besten
    Manuel

    InformationsquelleAutor mfreiholz
Schreibe einen Kommentar