Element opacity but not border

问题

Well, I have this question and I see that someone already asked something similar but this I don't understand yet.

What I want to do is to set a opacity of 0.7 to an element but just to the content and not to the border, I want the border to stay full color. Some example code here:

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

The result is that my input element has the opacity but even the border, Can someone tell me how to set the opacity just in the content but not the border?

Thank's.

回答1:

Use rgba syntax both for color and background and not use opacity for whole 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);
}

回答2:

I didn't see that the question was about an input element, but maybe my answer will help somebody else, so here we go.

As other posters have said, you can use the rgba syntax to define your background color.

If there are nested elements in the one you want to change, you also can apply the opacity to them with this css:

#element > * {
    opacity:0.8;
}

Here is an example: JsFiddle

If you want a background-image for your element, I think the best way is still to wrap it in a container with the border.

回答3:

opacity background but not border css

Demo here

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:

You can use background:rgba property for your desired results that will only effect your parent not the child and also for the border of parent.

CSS

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

DEMO

来源：https://stackoverflow.com/questions/13559188/element-opacity-but-not-border

标签

css

border

opacity