How to define the opacity of an element from within a div larger than the div itself

Asked

Viewed 361 times

2

As you can see, the opacity of button is larger than that of div, but still it’s in the same opacity, how could I change it ??

.div1
{
  width: 100px;
  height: 100px;
  background: #6a6a6a;
  opacity: 0.5;
}
.button
{ 
  width: 50px;
  height: 50px;
  margin-left: 25px;
  margin-top: 25px;
  opacity: 1.0;
}
<div class="div1">
  <input type="image" class="button" src="https://image.freepik.com/free-icon/users-group_318-48680.jpg">
</div>

css

  • .button { width: 50px; height: 50px; margin-left: 25px; margin-top: 25px; opacity: 1.0; } &#Xa)

3 answers

0

You can do using position absolute and placing one on top of the other.

.div1
{
  width: 100px;
  height: 100px;
  background: #6a6a6a;
  opacity: 0.5;
  position:absolute;
  z-index:1;
}
.button
{ 
  width: 50px;
  height: 50px;
  top:25px;
  left:25px;
  opacity: 1.0;
  position:absolute;
  z-index:2;
}

Depending on the background color you can change the main element’s own color and set an opacity for it:

div1{
   width: 100px;
   height: 100px;
   background: rgba(106, 106, 106, 0.5);
}

0

Good afternoon. I noticed that the button has the original value of the image defined in opacity, which will not imply any change, test this code and see if the problems have been solved.

.div1{
  width: 100px;
  height: 100px;
  background: #6a6a6a;
  opacity: 0.5; /*Neste caso, utilize de 0.1 até 0.9 para definir uma opacidade, e 1.0 para seu valor original.*/
}
      
.button{ 
  width: 50px;
  height: 50px;
  margin-left: 25px;
  margin-top: 25px;
 opacity: 0.5;

}
<html>
  <head>
    <title>Teste</title>
  </head>
  <body>
<div class="div1">
  <input type="image" class="button" src="https://image.freepik.com/free-icon/users-group_318-48680.jpg">
</div>
  </body>
</html>

0

What is happening is this, your element div1 this with opacity 0.5 or whatever is inside it will get opaque, if you want a transparent background the best option is to use colors in the format rgba following example:

.div1
{
  width: 100px;
  height: 100px;
  background-color: rgba(106, 106, 106, 0.5);
}
.button
{ 
  width: 50px;
  height: 50px;
  margin-left: 25px;
  margin-top: 25px;
}
<div class="div1">
  <input type="image" class="button" src="https://image.freepik.com/free-icon/users-group_318-48680.jpg">
</div>

Note that I converted your hexadecimal color to rgba.

  • Yes, but some colors I believe do not look the same, as for example, this #69e673;

  • @Lucascarezia as well? everything depends on how much you want transparency a black bg with opacity 0.5 is equivalent to rgba(0,0,0,.5)

Browser other questions tagged css

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