CODEWITHSUNDEEP
htmlcss
user3744225
user3744225

Reputation: 47

Lower opacy for bg color only, not for the content nor the border

how do i get it so that i reduce the opacy only for the BG color and not the content, and not the border.

css: 

.ghost-btn-small {
    text-decoration: none;
    text-align: center;
    margin: 320px auto 0 auto;
    background-color: #000000;
    opacity: 0.3;
    border: 1px solid #fff;
    height: 70px;
    width: 280px;
    line-height: 36px;
}

there has to be a quick and easy way?

Upvotes: 0

Views: 56

Answers (3)

SalemRady
SalemRady

Reputation: 191

Instead of copying codes why don't you read this:

When working with CSS colors, you can specify the color in several ways:

  • Color Name

background-color: red;

  • RGB Color Value:
background-color: #ff0000;
  • rgb function: this function accepts the three colors Red, Green and Blue as parameters either as integer or as percentage 
background-color: rgb(255,0,0); 

background-color: rgb(100%,0,0);
  • rgba function: The rgba function is similar to the rgb function except that is has the alpha parameter which represents the amount of transparency to use. It must be between 0.0 and 1.0 where 0.0 is invisible and 1.0 is fully opaque.
background-color:rgba(255,0,0,0.5);

background-color:rgba(100%,0,0,0.2);
  • hsl function: this is the hue-saturation-lightness function, where hue is an angle of the color circle, saturation is the amount of color to provide, and lightness is the amount of lightning to provide. This is typically used to produce matching colors by keeping the hue value the same and adjusting the saturation and the lightness.
background-color: hsl(0,100%, 50%);

Of course you could as well set the opacity property to set the amount of transparency an element has.

Hope this will help.

Upvotes: 1

Ronak Vala
Ronak Vala

Reputation: 23

.ghost-btn-small {


text-decoration: none;
  text-align:center;
  margin: 320px auto 0 auto;
  background-color:rgba(0,0,0,0.3); 
  border: 1px solid #fff;
  height: 70px;
  width:280px;
  line-height: 36px;
}

Just Copy this it will work. If you will give opacity attribute to class it will apply for whole class that is why your border was catching the opacity.

Upvotes: 1

G.L.P
G.L.P

Reputation: 7207

Try

background-color:rgba(0,0,0,.3);

instead of 

 background-color:#000000; 
 opacity: 0.3;

This applies only for background-color, not for content

Upvotes: 1

Related Questions