I find myself having problems in controlling the opacity of my items inside my container. The container should be the only one that is transparent but unfortunately all the items inside my container began to go transparent even though I already establish opacity: 1; to them.
Here is my code...
HTML
<!DOCTYPE html>
<html>
<head>
<title>Dino-Jump</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body class = "bg">
<div id = container>
<img src="Pics/user.jpg" id = "user">
<form action = "action-login">
<div id = "login-box">
<h1 class = "label1">Login</h1>
<div class = "textbox">
<i class = "fa fa-user" aria-hidden = "true"></i>
<input type="text" name="uname" placeholder="Username" required = "true">
</div>
<div class = "textbox">
<i class = "fa fa-lock" aria-hidden = "true"></i>
<input type="password" name="pword" placeholder="Password" required = "true">
</div>
<input class = "btn" type = "button" name = "login" value = "Login">
<a id = "forget" href=""> Forget Password </a>
<a id = "reg" href=""> Register </a>
</form>
</div>
</div>
<img src="Pics/title.png" id="game-title">
<div class = "footer">
<p>© Copyrights Dino-Jump ZRH.Group 10.20.20.18.2.37</p>
</div>
</body>
</html>
CSS
/**Style**/
@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
@media screen and (min-width:768){
.bg{
width: 100%;
margin: 0 auto;
padding: 0 auto;
display: block;
font-family: sans-serif;
background-image: url("Pics/bg.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
img{
width: 100%;
}
}
/**bofy**/
.bg{
margin: 0 auto;
padding: 0 auto;
font-family: sans-serif;
background-image: url("Pics/bg03.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
#user{
opacity: 1;
background-image: url("Pics/user.jpg");
width: 135px;
height: 135px;
margin: 0 auto;
padding: 0 auto;
border-radius: 50%;
border: 4px solid #ffbd04;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
#container{
opacity: 0.5;
margin: 0 auto;
padding: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 380px;
height: 480px;
background: #000;
border: 4px solid #ffbd04;
border-radius: 20px;
}
#login-box{
opacity: 1;
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
}
#login-box h1{
float: left;
font-size: 40px;
border-bottom: 4px solid #ffbd04;
margin-bottom: 50px;
padding: 13px 0;
}
.textbox{
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #ffbd04;
}
.texbox i{
width: 26px;
float: left;
text-align: center;
}
.textbox input{
border: none;
outline: none;
background: none;
color: #fff;
font-size: 18px;
width: 80%;
float: left;
margin: 0 10px;
}
::placeholder {
color: #fff;
}
[placeholder]:focus::-webkit-input-placeholder {
transition: text-indent 0.3s 0.3s ease;
text-indent: -100%;
opacity: 1;
}
.btn{
width: 100%;
background: none;
border: 2px solid #ffbd04;
border-radius: 10px;
color: #fff;
padding: 5px;
font-size: 18px;
margin: 12px;
transition: .6s;
overflow: hidden;
}
.btn:focus{
outline: none;
}
.btn:before{
content: '';
display: block;
position: absolute;
background: rgba(255,255,255,.5);
opacity: 0.5;
filter: blur(30px);
transform: translateX(-130px) skewX(-15deg);
}
.btn:after{
content: '';
display: block;
position: absolute;
background: rgba(255,255,255,.5);
opacity: 0;
filter: blur(30px);
transform: translate(-100px) scaleX(-15deg);
}
.btn:hover{
background: #ffbd04;
cursor: pointer;
}
.btn:hover:before{
transform: translateX(300px) skewX(-15deg);
opacity: 0.6;
transition: 0.7s;
}
.btn:hover:after{
transform: translateX(300px) skewX(-15deg);
opacity: 1;
transition: 0.7s;
}
/**Footer**/
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #000;
color: #fff;
text-align: left;
font-size: 8px;
}
#game-title{
width: 130px;
height: 40px;
position: absolute;
top: 91%;
left: 50%;
transform: translate(-50%,-50%);
}
#forget{
text-decoration: none;
position: absolute;
top: 110%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffbd04;
font-size: 12px;
font-family: sans-serif;
}
#reg{
text-decoration: none;
position: absolute;
top: 110%;
left: 50%;
transform: translate(-50%, -190%);
color: #ffbd04;
font-size: 12px;
font-family: sans-serif;
}
Sorry long post and thank you in advance.
The approach is wrong sir. It's child element's default behavior. You can't set opacity:1 to the child element once you set it to the parent element.
You have so many ways to achieve this. But since you are using a background color and looking for the opacity I suggest the easiest way that use background:rgba(0,0,0,0.5).This stands that the background color is #333 with the opacity of 0.5.
Learn more about rgba() here.
#container{
/*opacity: 0.5;*/ //remove this line
margin: 0 auto;
padding: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 380px;
height: 480px;
/*background: #000;*/ //remove this line
border: 4px solid #ffbd04;
border-radius: 20px;
background:(0,0,0,0.5); //newly added line
}