窗体透明如背景 CSS
[英]Form transparent like background CSS
问题描述
I'm practicing and studying Front-end (HTML/CSS) via FreeCodeCamp.
我正在通过 FreeCodeCamp 练习和学习前端 (HTML/CSS)。 I managed to complete the project but I would like to make my portfolio as presentable as possible.我设法完成了这个项目，但我想让我的作品集尽可能像样。
Googled and searched StackOverflow but couldn't find a specific answer to my issue.谷歌搜索并搜索了 StackOverflow，但找不到我的问题的具体答案。 I've toyed with the opacity in the body::before, the root rgba and tried to add/remove z-Index in both body and body::before, but my form area still looks transparent where the background should be the only faded image.我玩弄了 body::before 中的不透明度，根 rgba 并尝试在 body 和 body::before 中添加/删除 z-Index，但我的表单区域仍然看起来透明，而背景应该是唯一的褪色图片。 Any assistance on where I went wrong here?关于我在这里出错的地方有什么帮助吗？
HTML HTML
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body translate="no">
<main id="main">
<div class="container">
<header class="header">
<h1 id="title" class="text-center"> Most Popular Anime of 2020 Survey</h1>
<p id="description" class="description text"> Please take some time to fill out the following survey. Let's see which anime truly is the top voted for 2020!</p>
</header>
<form id="survey-form">
<div class="form-group">
<label id="name-label">Name</label>
<input type="text" name="name" id="name" placeholder="Enter name" class="form-control" required>
</div>
<div class="form-group">
<label id="email-label">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="form-control" required>
</div>
<div class="form-group">
<label id="number-label">Age (optional)</label>
<input type="number" name="age" id="number" placeholder="Enter your age" min="10" max="100" class="form-control" required>
</div>
<div class="form-group">
<p>How long have you watched anime?</p>
<label>
<input type="radio" name="time" value="Less than 1 year" class="input-radio" checked>Less than one year</label>
<label>
<input type="radio" name="time" value="1-3 years" class="input-radio">1 - 3 years</label>
<label>
<input type="radio" name="time" value="4+ years" class="input-radio">4+ years</label>
</div>
<div class="form-group">
<p> Which anime do you believe deserves to be the top for 2020?</p>
<select id="dropdown" name="anime" class="form-control" required>
<option disabled selected value>Please select one of the following anime</option>
<option value="demon">Demon Slayer</option>
<option value="dbz">Dragon Ball Super</option>
<option value="aot">Attack on Titan</option>
<option value="nob">Noblesse</option>
<option value="juju"> Jujutsu Kaisen</option>
<option value="mha"> My Hero Academia</option>
</select>
</div>
<div class="form-group">
<p>What part of anime do you enjoy best?</p>
<span class="apply">(Check all that apply)</span>
<label>
<input name="list" value="music" type="checkbox" class="input-checkbox">Music</label>
<label>
<input name="list" value="art" type="checkbox" class="input-checkbox">Art</label>
<label>
<input name="list" value="story" type="checkbox" class="input-checkbox">Story</label>
<label>
<input name="list" value="action" type="checkbox" class="input-checkbox">Action</label>
</div>
<div class="form-group">
<p>Any anime not on the list you would recommend for the next survey?</p>
<textarea id="comments" name="comment" placeholder="Name a suggestion" class="input-textarea">
</textarea>
</div>
<div>
<button type="submit" id="submit" class="submit-button">Submit</button>
</div>
</form>
</div>
</main>
</body>
CSS CSS
:root{
--color-white: #f3f3f3;
--color-darkblue: #1b1b32;
--color-darkblue-alpha: rgba(27,27,50, 1);
--color-green: #37af65;
}
*,
*::before,
*::after{
box-sizing: border-box;
}
body{
font-family: Georgia, Brush Script MT, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.4;
color: var(--color-white);
margin: 0;
z-Index: 1;
}
body::before{
content:"";
position: fixed;
top:0;
right:0;
height: 100%;
width:100%;
z-Indez: -1;
background: var(--color-darkblue);
background-image:
url("https://i.postimg.cc/8PMKKM2M/mha.jpg");
opacity: 0.25;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
h1 {
font-weight:400;
line-height: 1.2;
}
p{
font-size: 1.125rem;
}
h1, p{
margin-top: 0;
margin-bottom: 0.5rem;
}
label{
display: flex;
align-items: center;
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
input, button, select, textarea{
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button{
border: none;
}
.container{
width:100%;
margin: 3.125rem auto 0 auto;
}
@media (min-width: 576px){
.container{
max-width:540px;
}
}
@media (min-width: 768px){
.container{
max-width:720px;
}
}
.header{
padding: 0 0.625rem;
margin-bottom: 1.875rem;
color: black;
font-style: bold;
font-weight: 200;
}
.description{
font-style: italix;
font-weight 200;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
color: black;
text-align: center;
}
.apply{
margin-left: 0.25rem;
font-size: 0.9rem;
color: #e4e4e4;
}
.text-center{
text-align:center;
}
form{
background: var(--color-darkblue-alpha);
padding: 2.5rem 0.625rem;
border-radius:0.25rem;
}
@media(min-width:480px){
form{
padding: 2.5rem;
}
}
.form-group{
margin: 0 auto 1.25rem auto;
padding: 0.25rem;
}
.form-control{
display: block;
width: 100%;
height: 2.375;
padding: 0.375rem 0.75rem;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control: focus{
border-color: #80bdff;
outline:0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.input-radio, .input-checkbox{
display: inline-block;
margin-right: 0.625rem;
min-height: 1.25ren;
min-width: 1.25rem;
}
.input-textarea{
min-height: 120px;
width: 100%;
padding: 0.625rem;
resize: vertical;
}
.submit-button{
display:block;
width: 100%;
padding: 0.75rem;
background: var(--color-green);
color: inherit;
border-radius: 2px;
cursor: pointer;
}
Result结果
3 个解决方案
解决方案1
2 2020-12-29 16:35:15
I got it:)) correction:我明白了:)) 更正：
z-index: -1;
you coded "z-Indez: -1;"你编码了“z-Indez：-1;” that's why it was not working.这就是为什么它不起作用。 you can see below result:你可以看到下面的结果：
解决方案2
1 已采纳 2020-12-29 16:27:51
in your css file you wrote z-Indez: -1;在您的 css 文件中，您编写了z-Indez: -1; instead of z-index: -1;而不是z-index: -1; in body::before{} but if you change this your form background color will be your color variable --color-darkblue-alpha so the background will not be transparent.在body::before{}但如果你改变它，你的表单背景颜色将是你的颜色变量--color-darkblue-alpha所以背景不会是透明的。
解决方案3
0 2021-01-02 01:19:33
As mentioned before, the very slight typo of "z-Indez: -1" to "z-index: -1" should do the trick.如前所述，“z-Indez：-1”到“z-index：-1”的非常轻微的错字应该可以解决问题。
The one thing I'll add is that, sometimes when proof-reading, it's best to read bottom-up because your brain can trick you if only reading top-down.我要补充的一件事是，有时在校对时，最好自下而上阅读，因为如果只阅读自上而下，你的大脑就会欺骗你。
Hope this reaches you and helps, cheers!希望这能对你有所帮助，干杯！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.