Element Deckkraft, aber nicht die Grenze

Gut, ich habe diese Frage, und ich sehe, dass schon jemand gefragt, etwas ähnlich, aber das verstehe ich nicht, noch nicht.

Was ich will zu tun ist, um eine Opazität von 0,7 auf ein element, sondern nur um den Inhalt und nicht an der Grenze, ich will die Grenze zu bleiben, voller Farbe. Einige Beispiel-code hier:

input#element{
    width: 382px;
    height: 26px;
    border: 2px solid #FFF;
    border-radius: 3px;
    opacity: 0.8;
}

Das Ergebnis ist, dass mein input-element hat die Deckkraft, sondern auch die Grenze, Kann mir jemand sagen wie die Deckkraft nur im Inhalt, aber nicht die Grenze?

Danke.

  • Der einfachste Weg würde sein, dass die Grenze zu einem anderen element, das Sie umgibt den Eingang.
  • Ich danke Ihnen so sehr. Ich weiß nicht, wie ich nicht vorzustellen. Das ist genau das, was ich wollte.
  • Ihre Lösung keine Auswirkungen auf text -, check-mine
InformationsquelleAutor Andres Orozco | 2012-11-26
  1. 23

    Verwenden rgba syntax sowohl für Farbe und hintergrund und nicht die Deckkraft für das ganze element

    demo dabblet

    input {
    width: 382px;
    height: 26px;
    border: 2px solid #FFF;
    border-radius: 3px;
    background: rgba(255, 255, 255, .8);
    color: rgba(0, 0, 0, .8);
}
    InformationsquelleAutor Vladimir Starkov
  2. 3

    Ich nicht sehen, dass die Frage war über ein input-element, aber vielleicht ist meine Antwort helfen wird, jemand anderes, also hier wir gehen.

    Wie die anderen Poster gesagt haben, können Sie die rgba syntax zum definieren der hintergrund-Farbe.

    Wenn es verschachtelte Elemente, die Sie ändern möchten, können Sie auch anwenden, die opacity Ihnen mit diesem css:

    #element > * {
    opacity:0.8;
}

    Hier ist ein Beispiel: JsFiddle

    Wenn Sie möchten, dass ein hintergrund-Bild für Ihr element, ich denke, der beste Weg ist immer noch, um wickeln Sie es in einem container mit der Grenze.

    InformationsquelleAutor TonioElGringo
  3. 1

    Deckkraft hintergrund, aber nicht die Grenze css

    Demo hier

    html

    <div id="element"></div>

    css

    #element{
    width: 156px;
    height: 156px;
    border: 2px solid #96d5ea;
    background:rgba(150, 213, 234,1);
    margin: 35px auto;
    -webkit-transform: rotate(-45deg);
    -webkit-transition: all 1s ease;
}

#element:hover {
    background:rgba(150, 213, 234,0);
    -webkit-transform: rotate(315deg);
}
    InformationsquelleAutor user3661777
  4. 0

    Können Sie background:rgba Eigenschaft für den gewünschten Ergebnissen, wird nur Effekt Ihre parent nicht die child und auch für die border von parent.

    CSS

    input#element{
    width: 382px;
    height: 26px;
    border: 2px solid #000;
    border-radius: 3px;
    background:rgba(255,0,0,0.1);
}

    DEMO

    • haben Sie vergessen, anwenden, semi-Transparenz, um den text in input
    InformationsquelleAutor Shailender Arora
Schreibe einen Kommentar