How to define the opacity of an element within a div greater than that of the div itself

Question

How to define the opacity of an element within a div greater than that of the div itself

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

1

As you can see, the opacity of the button is greater than that of the div , but even so it is 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

asked by anonymous 06.04.2017 / 21:09

3 answers

Form Contact form7- There is no error message but the form is not submitted PhpMyAdmin does not open after changing default

score 0 · Answer 1

You can do this by using position absolute and positioning 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 color of the main element itself and set an opacity for it:

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

score 0 · Answer 2

Good afternoon. I noticed that the button is with 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 remedied.

.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>

score 0 · Answer 3

What is happening is as follows, its element div1 is opacity 0.5 or everything inside it will be opacity, if you want a transparent background the best option is to use colors in the rgba format % follow 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.