Element opacity but not border

ε祈祈猫儿з 提交于 2019-11-29 09:27:10

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);
}

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.

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);
}

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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!