Elemento de opacidad, pero no de la frontera

Bueno, tengo esta pregunta y veo que alguien ya pidió algo similar, pero esto no lo entiendo todavía.

Lo que quiero hacer es establecer una opacidad de 0.7 a un elemento, pero sólo para el contenido y no en la frontera, yo quiero la frontera a estar llena de color. El código de ejemplo aquí:

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

El resultado es que mi entrada es el elemento de opacidad, sino incluso de la frontera, alguien me Puede decir cómo establecer la opacidad sólo en el contenido, pero no de la frontera?

Gracias.

  • La manera más fácil sería dar la frontera a otro elemento que rodea a la entrada.
  • Muchas gracias. No sé cómo no me imagine esto. Eso es exactamente lo que yo quería.
  • su solución no efecto en el texto, comprobar la mina

4 Kommentare

  1. 23

    Uso rgba sintaxis, tanto para el color y el fondo y no utilizar la opacidad de todo el elemento

    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);
    }
  2. 3

    No veo que se trata de un elemento de entrada, pero tal vez mi respuesta va a ayudar a alguien más, así que aquí vamos.

    Como otros carteles han dicho, puede utilizar el rgba sintaxis para definir el color de fondo.

    Si hay elementos anidados en el que desea cambiar, también se puede aplicar el opacity a ellos con este css:

    #element > * {
        opacity:0.8;
    }

    Aquí está un ejemplo: JsFiddle

    Si quieres una imagen de fondo para el elemento, creo que la mejor manera es todavía meterlo en un recipiente con la frontera.

  3. 1

    opacidad de fondo pero no en la frontera css

    Demo aquí

    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);
    }
  4. 0

    Puede utilizar background:rgba de la propiedad de los resultados deseados que sólo efecto de su parent no la child y también para la border de parent.

    CSS

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

    DEMO

    • se le olvidó aplicar semi-transparencia para el texto dentro de la entrada

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea