CODEWITHSUNDEEP
htmlcsstransparency
Lukus
Lukus

Reputation: 1171

How to exclude border from opacity change

I have this CSS:

#name { 
    border: 1px solid #fff;
    color: #a5a5a5;
    opacity: 0.3;
    font-size: 11px;
    font-family: "times new roman";
}

however the border also has opacity set as 0.3 but I do not want the border to have opacity how do I exclude this element?

Upvotes: 3

Views: 3865

Answers (5)

Vijay Sarin
Vijay Sarin

Reputation: 1336

Try this

#name { 
    border: 1px solid #fff;
    color: #a5a5a5;
    opacity: 0.3;
    font-size: 11px;
    font-family: "times new roman";
    height: 50px;
}

#name:after {
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 1);
    content: '';
    display: block;
}

Upvotes: 0

Will
Will

Reputation: 20235

You can create a container.

#name {
    border: 1px solid #fff;
    color: #a5a5a5;
    font-size: 11px;
    font-family: times new roman;
}

.op3 {
    opacity: 0.3;
}

<div id="name">
    <div class="op3">
       <!-- content -->
    </div>
</div>

Upvotes: 0

Drakekin
Drakekin

Reputation: 1348

Change the HTML structure to:

<div id="name">
    <div>
       Stuff
    </div>
<div>

And the CSS to:

#name { 
    border: 1px solid #fff;
}

#name div { 
    color: #a5a5a5;
    opacity: 0.3;
    font-size: 11px;
    font-family: "times new roman";
}

Upvotes: 1

Alex Peta
Alex Peta

Reputation: 1407

you can add a container with border and the content with opacity:

<div id="container" style="border:1px solid #fff">
  <div id="name">
   --------
   </div>
</div>

Upvotes: 1

Ry-
Ry-

Reputation: 224921

You can't. opacity sets the opacity on the entire element. Depending on the element's actual content, you have two options:

  1. Wrap the entire content in a <div> and apply the border to that instead.
  2. If there's only text and/or a background, use rgba to specify the text color and/or background color/gradient instead of opacity.

Upvotes: 6

Related Questions