Transparent background

Asked

Viewed 168 times

-2

I am a layman in css, and I don’t know why it is not becoming transparent a certain area that I marked. I put in jsfiddle

code

When I put the red part as transparent it disappears. But any other color works. NOTE: Putting white will seem transparent, but that’s not what I want to do.

edit1: All I want to do is leave the red area as transparent without catching the blue color, but the background behind the blue

html css

  • What exactly do you want to do?

  • I swear I couldn’t understand your question. But it has something to do with RGBA color space, where R is an integer between 0 and 255 indicating the intensity of Red, where G is an integer between 0 and 255 indicating the intensity of Green, where B is an integer between 0 and 255 indicating the intensity of Blue and finally A which is an integer between 0 and 255 indicating the intensity of transparency where 0 is totally transparent and 255 is an opaque choir.

  • 1

    All I want to do is leave the red area as transparent without picking up the blue color, but the background behind the blue

1 answer

1


I don’t know if this is what you’re looking for, but I applied it to the square(class base) the CSS attribute mix-blend-mode with the value hard-light.

The estate mix-blend-mode describes how a content element should be merged with the elements below it in the background, in the background chess case.

The value hard-light is the combination of Screen and Multiply mixing filters which makes the objects gray(class content) transparent.

.body{
	background-color: black;
	width: 400px;
	height: 300px;
    background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
        background-size: 20px 20px;
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.base {
	position: relative;
	left: 10px;
	top: 0px;
	width: 200px;
	height: 200px;
	border: solid 1px black;
	background-color: blue;
	mix-blend-mode: hard-light;
}

.content {
    position:absolute;
    background-color: gray;
    width:200px;
    height:200px;
    top:-100px;
    border-radius:100%; 
}
<div class="body">
    
	<div class="base">    		
        <div class="content"></div>
	</div>
</div>

  • 1

    Exactly that, I was unaware of this property, tried and did not work, thank you man

  • Would it be possible to use other colors also to get the same result? Instead of Gray, Blue, Red...

  • With hard-light only the gray. That’s because the mix-blend-mode systematically instructs the renderer how to operate pixel components and gray (in this case) functions as a mask (Chromakey). To operate with other RGB or RGBA colors use other values mix-blend-mode.

  • Each color in the RGB space has three components R(red), G(green) and B(blue) that vary, even, between 0 and 255 therefore 256 variations being that the number 127 is the center. The blend mode hard-light is an operator that generates transparency at the midpoint of each channel rgb(127, 127, 127) or gray. For each channel we can create an independent transparency adjustment and for different that 127 (larger or smaller) decreases a degree of transparency, values greater than 127 the background channel is displayed multiplied by 2 and smaller than 127 the channel is divided by 2. Ex:rgb(255, 127, 127) in place of Gray.

  • Using this red gets 80% transparent, my other question is, how do you ignore it in an element x? If you have tutorials of these things, I would like to see

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.