Is there such a thing as putting a percentage on the transparency?

HTML & CSS
1

opacity: .5;

Can you do the same thing with transparent?

Can you give it a decimal, putting a percentage on the transparency?
transparent: .5;

Does something like that even exist?

2

opacity: .5;

opacity is a valid property and .5 is valid value

transparent: .5;

transparent is not a property, it is a value

2 Likes
3

Can you give an element:

5% transparency
10% transparency
20% transparency

Can this be done?

Opacity isn’t the same thing as transparency.

4

It’s done with opacity.

What are you trying to change, a background color?

Opacity isn’t the same thing as transparency.

It can be when it is set to full transparency, anything other than that becomes opaque

The background-color property

/* RGBA value or RGB with alpha channel /
background-color: rgba(117, 190, 218, 0.0); / 0.0 - fully transparent /
background-color: rgba(117, 190, 218, 0.5); / 0.5 - semi-transparent /
background-color: rgba(117, 190, 218, 1.0); / 1.0 - fully opaque */

5

opacity:.5; that’s not see through.

  .wrap li:nth-of-type(15) a::before,
    .wrap li:nth-of-type(15) a::after {
      content: '';
      position: absolute;
      top: 0;
      width: 14px;
      height: 44px;
      opacity: .5;
    }

How would you apply transparency/opacity to 3 blocks of colors, but not individually?

6

Transparency is controlled by opacity. The lower the value of opacity, the more transparent something will be. The property runs on a scale of 0.0 to 1.0 with 1.0 being fully opaque and 0.0 being fully transparent. If you wanted to make 20% transparent (which I’m assuming you want to make an image or background slightly see through), that would translate to 80% opacity so you would have to do opacity: 0.8 to achieve that.

Here is some information about it

7

opacity: .8; certainly isn’t transparent here.

.wrap li:nth-of-type(15) a::before,
    .wrap li:nth-of-type(15) a::after {
      content: '';
      position: absolute;
      top: 0;
      width: 14px;
      height: 44px;
      opacity: .8;
    }
8

I got it to work by doing this:


 .wrap li:nth-of-type(15) a::before,
    .wrap li:nth-of-type(15) a::after {
      content: '';
      position: absolute;
      top: 0;
      width: 14px;
      height: 44px;
      opacity: 0.2;
    }
    
    .wrap li:nth-of-type(15) a::before {
      left: 0;
      background: #00ffff;
      opacity: 0.2;
    }
    
    .wrap li:nth-of-type(15) a::after {
      right: 0;
      background: #ff00ff;
      opacity: 0.2;
    }
9

That’s no see through where you can see the background image.

As you can see:
You can’t see the background image underneath it.

10

Apply it to this too:

    .wrap li:nth-of-type(15) a {
      position: relative;
      background: #ffffff;
      border: 3px solid #0059dd;
    }

That’s where the solid white is coming from.

You’re going to have to fiddle with methods of having all three colours there if you don’t want the border to be transparent as well since adding any level of opacity to that will also affect your border.

11

I don’t want opacity to be targeting the border.

12 
 .wrap li:nth-of-type(15) a {
      position: relative;
      background:transparent; /*adjust this*/
      border: 3px solid #0059dd;
    }
13

How would I remove opacity from targeting the blue border?

border: 3px solid #0059dd;

    .wrap li:nth-of-type(15) a {
      position: relative;
      background: #ffffff;
      border: 3px solid #0059dd;
      opacity: 0.7;
    }
14

Remove opacity from .wrap li:nth-of-type(15) a and set background:transparent

    .wrap li:nth-of-type(15) a {
      position: relative;
      background: transparent;
      border: 3px solid #0059dd;
    }
    
    .wrap li:nth-of-type(15) a::before,
    .wrap li:nth-of-type(15) a::after {
      content: '';
      position: absolute;
      top: 0;
      width: 14px;
      height: 44px;
    }
    
    .wrap li:nth-of-type(15) a::before {
      left: 0;
      background: #00ffff;
      opacity: 0.2;
    }
    
    .wrap li:nth-of-type(15) a::after {
      right: 0;
      background: #ff00ff;
      opacity: 0.2;
    }
15

How come:

0.5 here

background: rgba(255, 255, 255, 0.5);
background: rgba(0, 255, 255, 0.5);
background: rgba(255, 0, 255, 0.5);

Is different from:

0.5 here?

16

RGB(A) values have more accuracy to them, or a more refined color.

A HEX color code is a 6 digit shorthand for its RGB values, not as refined.

That is likely the difference you are seeing.

EDIT:
You have added another layer of transparency back in when you did this
That added another filter to your colors on the left and right

    .wrap li:nth-of-type(15) a {
      position: relative;
      background: rgba(255, 255, 255, 0.5);
      border: 3px solid #0059dd;
    }
17

hsl:

background: hsl(0, 0%, 100%, 0.5);
background: hsl(180, 100%, 50%, 0.5);
background: hsl(300, 100%, 50%, 0.5);
18

How do you set transparency with hex value?

background: #ffffff;
background: #00ffff;
background: #ff00ff;
19

This helped with that:

20

Had you read through the link I posted in post #4 you would have found this…


/* Hexadecimal value with alpha channel */
background-color: #11ffee00; /* 00 - fully transparent */
background-color: #11ffeeff; /* ff - fully opaque */
2 Likes