我发现自己在控制容器中项目的不透明度时遇到问题。容器应该是唯一透明的容器,但是不幸的是,即使我已经建立了不透明性,容器中的所有项目也开始变得透明:给他们。
这是我的代码...
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;
}
对不起,很长的帖子,谢谢你。
答案 0 :(得分:0)
您已将opacity:0.5赋予容器类,并将opacity:1赋予子类。与其将不透明度设置为父类,不如将rgba格式的背景色设置为容器类并删除不透明度
背景:rgba(0,0,0,0.5);
如果您对父类使用不透明度,那么即使您为子类设置了高度不透明度,子类也不会起作用。
答案 1 :(得分:0)
使用!important关键字可以得到一些结果。
#login-box{
opacity: 1 !important;
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff !important;
}
您看不到文本,但是您可能可以从那里得到想要的内容。
答案 2 :(得分:0)
这种方法是错误的先生。这是子元素的默认行为。一旦将opacity:1
设置为子元素,就无法将其设置为父元素。
您有很多方法可以实现这一目标。但是,由于您使用的是背景色并查找不透明性,因此我建议使用最简单的方法background:rgba(0,0,0,0.5)
。这表示背景色为#333
,opacity
为{{1} }。
详细了解0.5
here。
rgba()