如何合并以下表格和以下背景？

问题描述

我希望有人可以帮助我解决这个问题，在编码方面，我是一个新手。

我已经在两个单独的文件中制作了表格和背景。我想要实现的是：

合并两个文件，其中表格应位于右上角屏幕的侧面，我希望背景保持原样，应该不断更改图片和背景色。
在表单中，我的滚动条移出了div，其中有一个边界半径，我希望它留在里面。
在表单中，如果您查看下拉菜单，则底部箭头对齐不正确，如何将其移向左侧，以便正确可见。

我已经尝试了一些解决方案，但是要么弄乱了背景，要么改变了表单的对齐方式。请查看下面两个文件的代码，并希望能帮助一个兄弟。

我还附加了他们的Codepen链接： (i) For the background: (ii) For the form:

背景代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="stylesheet" href="SurveyForm.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" 
      integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" 
      crossorigin="anonymous">
      <title>Lego Technic Survey Form</title>
</head>
<body>
      <div class="images" id="one">
           <img class="cars" id="lambo" src="Lamborgini.png" alt="">
      </div>

      <div class="images" id="two">
           <img class="cars" id="bugatti" src="Bugatti.png" alt="">
      </div>

      <div class="images" id="three">
           <img class="cars" id="porsche" src="Porsche.png" alt="">
      </div>

      <div class="images" id="four">
           <img class="cars" id="dodge" src="Dodge.png" alt="">
      </div>

      <div class="images" id="five">
           <img class="cars" id="chevrolet" src="Chevrolet.png" alt="">
      </div>

      <script>
             var myIndex = 0;
             carousel();

             function carousel() {
             var i;
             var x = document.getElementsByClassName("images");
             for (i = 0; i < x.length; i++) {
                 x[i].style.display = "none";  
             }
             myIndex++;
             if (myIndex > x.length) {myIndex = 1}    
             x[myIndex-1].style.display = "block";  
             setTimeout(carousel,2000); // Change image every 2 seconds
             }
      </script>
</body>
</html>

CSS：

body {
    margin: 0;
    height: 100vh;
}

#one {
    background-color: #9dde75;
}

#two {
    background-color: #66b1e0;
}

#three {
    background-color: #e65643;
}

#four {
    background-color: #3e3c42;
}

#five {
    background-color: #ee8952d7;
}

#one,#two,#three,#four,#five {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;      
}

.cars {
    width: 500px;
    margin-top: 250px;
    margin-left: 100px;
    background-attachment: fixed;
}

#porsche {
    margin-top: 200px;
}

#chevrolet {
    margin-top: 180px;
}

表格代码：

HTML：

<body>

    <div class="neumorphic-form">
        <div class="logo">
            <img src="legologo.png" alt="">
        </div>
        <div>
            <h1 id="title">Lego Technic Survey Form</h1>
        </div>
        <div>
            <p id="description">Thank you for taking the time to help us be more creative</p>
        </div>
    
        <div class="fields">
            <form id="survey-form" action="">
                    <div class="username">
                        <label for="name" id="name-label" hidden>Name:</label>
                        <input type="text" id="name" name="name" placeholder="Enter your name">
                    </div>
                    
                    <div class="email">
                        <label for="email" id="email-label" hidden>Email:</label>
                        <input type="email" id="email" name="email" placeholder="Enter your email address">
                    </div>
                    
                    <div class="number">
                        <label for="tel" id="number-label" hidden>Contact Number:</label>
                        <input type="tel" id="number" name="number" placeholder="Enter your contact number"><br>
                    </div>
                    
                    <div class="favourite">
                        <p>Which is your favorite Lego Technic Building Set?</p>
                    </div>
                    <div class="dropdownoptions">
                        <select name="buildingset" id="dropdown">
                            <option disabled selected value>Select any one set</option>
                            <option value="Lamborgini Sián FKP 37">Lamborgini Sián FKP 37</option>
                            <option value="Bugatti Chiron">Bugatti Chiron</option>
                            <option value="Porsche 911 RSR">Porsche 911 RSR</option>
                            <option value="Dodge Charger">Dodge Charger</option>
                            <option value="Chevrolet Corvette ZR1">Chevrolet Corvette ZR1</option>
                        </select>
                    </div>
                    
                
                    <p>Would you recommend to buy Lego Technic to a friend?</p>
                    <div class="neumorph">
                        <input type="radio" id="definitely" class="radiocheck" name="a" checked>
                        <label for="definitely">Definitely</label><br>
                        <input type="radio" id="maybe" class="radiocheck" name="a">
                        <label for="maybe">Maybe</label><br>
                        <input type="radio" id="notsure" class="radiocheck" name="a">
                        <label for="notsure">Not Sure</label>
                    
                    <p>Which Lego Technic sets would you like to see in the future?</p>
                        <input type="checkbox" class="radiocheck" id="ferrarilaferrari" name="b" value="ferrarilaferrari" checked>
                        <label for="ferrarilaferrari"> Ferrari LaFerrari</label><br>
                        <input type="checkbox" class="radiocheck" id="zenvots1gt" name="b" value="Zenvots1gt">
                        <label for="Zenvots1gt"> Zenvo TS1 GT</label><br>
                        <input type="checkbox" class="radiocheck" id="koenigseggone" name="b" value="koenigseggone">
                        <label for="koenigseggone"> Koenigsegg One</label><br>
                        <input type="checkbox" class="radiocheck" id="mercedesamgone" name="b" value="mercedesamgone">
                        <label for="mercedesamgone"> Mercedes-AMG One</label><br>
                        <input type="checkbox" class="radiocheck" id="paganihuayrabc" name="b" value="paganihuayrabc">
                        <label for="paganihuayrabc"> Pagani Huayra BC</label><br>
                        <input type="checkbox" class="radiocheck" id="astonmartinvalkyrie" name="b" value="astonmartinvalkyrie">
                        <label for="astonmartinvalkyrie"> Aston Martin Valkyrie</label><br>
                        <input type="checkbox" class="radiocheck" id="mercedesbenzmaybachexelero" name="b" value="mercedesbenzmaybachexelero">
                        <label for="mercedesbenzmaybachexelero"> Mercedes Benz Maybach Exelero</label><br>
                        <input type="checkbox" class="radiocheck" id="rollsroycesweptail" name="b" value="rollsroycesweptail">
                        <label for="rollsroycesweptail"> Rolls Royce Sweptail</label> <br><br>
                    </div>
                    
                    <div class="comments">
                        <textarea id="textarea" name="textarea" placeholder="Enter your comments or suggestions here..." rows="6" cols="40"></textarea>
                    </div>

                    <button type="button" id="submit">Submit</button> 
            </form>
        </div>
    </div>
   
</body>
</html>

CSS：

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   height: 100vh;
   width: 100vw;
   overflow: hidden;
   font-family: 'Lato',sans-serif;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #555;
   background: #ecf0f3;
}

.neumorphic-form {
   overflow: scroll;
   overflow-x: hidden;
   width: 430px;
   height: 700px;
   padding: 60px 35px 35px 35px;
   border-radius: 40px;
   background: #ecf0f3;
   box-shadow: 13px 13px 20px #cbced1,-13px -13px 20px #ffffff;
}

.logo {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   margin: 0 auto;
   box-shadow: 0px 0px 2px #5f5f5f,0px 0px 0px 5px #ecf0f3,8px 8px 15px #a7aaaf,-8px -8px 15px #ffffff;
}

img {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   margin: 0 auto;
}

#title {
   text-align: center;
   font-size: 24px;
   padding-top: 18px;
   letter-spacing: 0.5px;
}

#description {
   text-align: center;
   font-size: 12px;
   letter-spacing: 2px;
   text-transform: uppercase;
}

.fields {
   width: 100%;
   padding: 25px 5px 5px 5px;
}

.fields input,textarea,#dropdown {
   border: none;
   outline:none;
   background: none;
   font-size: 16px;
   color: #555;
   padding: 15px 10px 15px 10px;
}

.username,.email,.number,.comments,#dropdown {
   margin-bottom: 20px;
   border-radius: 25px;
   box-shadow: inset 8px 8px 8px #cbced1,inset -8px -8px 8px #ffffff;
}

#name,#email,#number,#textarea,#dropdown {
   width: 100%;
}   

textarea {
   resize: none;
}

button {
   outline: none;
   border:none;
   cursor: pointer;
   width:100%;
   height: 60px;
   border-radius: 30px;
   font-size: 20px;
   font-weight: 700;
   font-family: 'Lato',sans-serif;
   color:#fff;
   text-align: center;
   background: #ed462f;
   box-shadow: 3px 3px 8px #b1b1b1,-3px -3px 8px #ffffff;
   transition: 0.5s;
}

button:hover {
   background:#992c1d;
}
  
button:active {
   background:#ed462f;
}
 
label,input {
   vertical-align: middle;
   font-weight: 400;
}

p {
   margin-top: 15px;
   margin-left: 5px;
   margin-right: 5px;
   text-align: justify;
}

#dropdown {
   margin-bottom: 10px;
}

.neumorph > input[type=radio].radiocheck,.neumorph > input[type=checkbox].radiocheck {
   position: relative;
   -webkit-appearance: none;
   width: 30px;
   height: 30px;
   margin: 10px;
   background-color: #eeeeee;
   box-shadow: 5px 5px 10px rgba(0,.2),-5px -5px 10px rgba(255,255,1),inset 0 0 0 rgba(0,inset 0 0 0 rgba(255,.2);
   outline: none;
   cursor: pointer;
   transition: all .3s ease-in-out;
}

.neumorph > input[type=radio].radiocheck:checked,.neumorph > input[type=checkbox].radiocheck:checked {
   background-color: #ed462f;
   box-shadow: 0 0 0 rgba(0,0 0 0 rgba(255,inset 5px 5px 10px rgba(0,inset -5px -5px 10px rgba(255,.2);
}

.neumorph > input[type=radio].radiocheck {
   border-radius: 50%;
}

.neumorph > input[type=checkbox].radiocheck {
   border-radius: 20%;
}

.neumorph > input[type=radio].radiocheck::before,.neumorph > input[type=checkbox].radiocheck::before {
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   color: #eee;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

.neumorph > input[type=radio].radiocheck::before {
   content: "\f111";
   font-size: 10px;
}

.neumorph > input[type=checkbox].radiocheck::before {
   content: "\f00c";
   font-size: 15px;
}

::-webkit-scrollbar-thumb {
   background-color: rgba(212,212,0.555);
   border: 4px solid transparent;
   border-radius: 8px;
   background-clip: padding-box;
}
  
::-webkit-scrollbar {
   width: 16px;
}

谢谢！

解决方法

我为这两个组件添加了一个容器，将它们合并并固定了CSS。关键是将图片幻灯片放到position: fixed;中并居中放置表单。

body {
    margin: 0;
    height: 100vh;
}

.images-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.images {
    height: 100%;
}

#one {
    background-color: #9dde75;
}

#two {
    background-color: #66b1e0;
}

#three {
    background-color: #e65643;
}

#four {
    background-color: #3e3c42;
}

#five {
    background-color: #ee8952d7;
}

#one,#two,#three,#four,#five {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.cars {
    width: 500px;
    margin-top: 250px;
    margin-left: 100px;
}

#porsche {
    margin-top: 200px;
}

#chevrolet {
    margin-top: 180px;
}

.neumorphic-form {
    z-index: 2 overflow: scroll;
    margin: 0 auto;
    overflow-x: hidden;
    width: 430px;
    height: 700px;
    padding: 60px 35px 35px 35px;
    border-radius: 40px;
    background: #ecf0f3;
    box-shadow: 13px 13px 20px #cbced1,-13px -13px 20px #ffffff;
}

.logo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: 0px 0px 2px #5f5f5f,0px 0px 0px 5px #ecf0f3,8px 8px 15px #a7aaaf,-8px -8px 15px #ffffff;
}

.neumorphic-form img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
}

#title {
    text-align: center;
    font-size: 24px;
    padding-top: 18px;
    letter-spacing: 0.5px;
}

#description {
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.fields {
    width: 100%;
    padding: 25px 5px 5px 5px;
}

.fields input,textarea,#dropdown {
    border: none;
    outline: none;
    background: none;
    font-size: 16px;
    color: #555;
    padding: 15px 10px 15px 10px;
}

.username,.email,.number,.comments,#dropdown {
    margin-bottom: 20px;
    border-radius: 25px;
    box-shadow: inset 8px 8px 8px #cbced1,inset -8px -8px 8px #ffffff;
}

#name,#email,#number,#textarea,#dropdown {
    width: 100%;
}

textarea {
    resize: none;
}

button {
    outline: none;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 60px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Lato',sans-serif;
    color: #fff;
    text-align: center;
    background: #ed462f;
    box-shadow: 3px 3px 8px #b1b1b1,-3px -3px 8px #ffffff;
    transition: 0.5s;
}

button:hover {
    background: #992c1d;
}

button:active {
    background: #ed462f;
}

label,input {
    vertical-align: middle;
    font-weight: 400;
}

p {
    margin-top: 15px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: justify;
}

#dropdown {
    margin-bottom: 10px;
}

.neumorph>input[type=radio].radiocheck,.neumorph>input[type=checkbox].radiocheck {
    position: relative;
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    margin: 10px;
    background-color: #eeeeee;
    box-shadow: 5px 5px 10px rgba(0,.2),-5px -5px 10px rgba(255,255,1),inset 0 0 0 rgba(0,inset 0 0 0 rgba(255,.2);
    outline: none;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.neumorph>input[type=radio].radiocheck:checked,.neumorph>input[type=checkbox].radiocheck:checked {
    background-color: #ed462f;
    box-shadow: 0 0 0 rgba(0,0 0 0 rgba(255,inset 5px 5px 10px rgba(0,inset -5px -5px 10px rgba(255,.2);
}

.neumorph>input[type=radio].radiocheck {
    border-radius: 50%;
}

.neumorph>input[type=checkbox].radiocheck {
    border-radius: 20%;
}

.neumorph>input[type=radio].radiocheck::before,.neumorph>input[type=checkbox].radiocheck::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #eee;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.neumorph>input[type=radio].radiocheck::before {
    content: "\f111";
    font-size: 10px;
}

.neumorph>input[type=checkbox].radiocheck::before {
    content: "\f00c";
    font-size: 15px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(212,212,0.555);
    border: 4px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
}

 ::-webkit-scrollbar {
    width: 16px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

<div class="neumorphic-form">
        <div class="logo">
            <img src="https://i.postimg.cc/G23dM93h/legologo.png" alt="">
        </div>
        <div>
            <h1 id="title">Lego Technic Survey Form</h1>
        </div>
        <div>
            <p id="description">Thank you for taking the time to help us be more creative</p>
        </div>
    
        <div class="fields">
            <form id="survey-form" action="">
                    <div class="username">
                        <label for="name" id="name-label" hidden>Name:</label>
                        <input type="text" id="name" name="name" placeholder="Enter your name">
                    </div>
                    
                    <div class="email">
                        <label for="email" id="email-label" hidden>Email:</label>
                        <input type="email" id="email" name="email" placeholder="Enter your email address">
                    </div>
                    
                    <div class="number">
                        <label for="tel" id="number-label" hidden>Contact Number:</label>
                        <input type="tel" id="number" name="number" placeholder="Enter your contact number"><br>
                    </div>
                    
                    <div class="favourite">
                        <p>Which is your favorite Lego Technic Building Set?</p>
                    </div>
                    <div class="dropdownoptions">
                        <select name="buildingset" id="dropdown">
                            <option disabled selected value>Select any one set</option>
                            <option value="Lamborgini Sián FKP 37">Lamborgini Sián FKP 37</option>
                            <option value="Bugatti Chiron">Bugatti Chiron</option>
                            <option value="Porsche 911 RSR">Porsche 911 RSR</option>
                            <option value="Dodge Charger">Dodge Charger</option>
                            <option value="Chevrolet Corvette ZR1">Chevrolet Corvette ZR1</option>
                        </select>
                    </div>
                    
                
                    <p>Would you recommend to buy Lego Technic to a friend?</p>
                    <div class="neumorph">
                        <input type="radio" id="definitely" class="radiocheck" name="a" checked>
                        <label for="definitely">Definitely</label><br>
                        <input type="radio" id="maybe" class="radiocheck" name="a">
                        <label for="maybe">Maybe</label><br>
                        <input type="radio" id="notsure" class="radiocheck" name="a">
                        <label for="notsure">Not Sure</label>
                    
                    <p>Which Lego Technic sets would you like to see in the future?</p>
                        <input type="checkbox" class="radiocheck" id="ferrarilaferrari" name="b" value="ferrarilaferrari" checked>
                        <label for="ferrarilaferrari"> Ferrari LaFerrari</label><br>
                        <input type="checkbox" class="radiocheck" id="zenvots1gt" name="b" value="Zenvots1gt">
                        <label for="Zenvots1gt"> Zenvo TS1 GT</label><br>
                        <input type="checkbox" class="radiocheck" id="koenigseggone" name="b" value="koenigseggone">
                        <label for="koenigseggone"> Koenigsegg One</label><br>
                        <input type="checkbox" class="radiocheck" id="mercedesamgone" name="b" value="mercedesamgone">
                        <label for="mercedesamgone"> Mercedes-AMG One</label><br>
                        <input type="checkbox" class="radiocheck" id="paganihuayrabc" name="b" value="paganihuayrabc">
                        <label for="paganihuayrabc"> Pagani Huayra BC</label><br>
                        <input type="checkbox" class="radiocheck" id="astonmartinvalkyrie" name="b" value="astonmartinvalkyrie">
                        <label for="astonmartinvalkyrie"> Aston Martin Valkyrie</label><br>
                        <input type="checkbox" class="radiocheck" id="mercedesbenzmaybachexelero" name="b" value="mercedesbenzmaybachexelero">
                        <label for="mercedesbenzmaybachexelero"> Mercedes Benz Maybach Exelero</label><br>
                        <input type="checkbox" class="radiocheck" id="rollsroycesweptail" name="b" value="rollsroycesweptail">
                        <label for="rollsroycesweptail"> Rolls Royce Sweptail</label> <br><br>
                    </div>
                    
                    <div class="comments">
                        <textarea id="textarea" name="textarea" placeholder="Enter your comments or suggestions here..." rows="6" cols="40"></textarea>
                    </div>

                    <button type="button" id="submit">Submit</button> 
            </form>
        </div>
    </div>
<div class="images-container">
<div class="images" id="one">
                <img class="cars" id="lambo" src="https://i.postimg.cc/Xqp3bhyR/Lamborgini.png" alt="">
            </div>

            <div class="images" id="two">
                <img class="cars" id="bugatti" src="https://i.postimg.cc/KvCcZZfJ/Bugatti.png" alt="">
            </div>

            <div class="images" id="three">
                <img class="cars" id="porsche" src="https://i.postimg.cc/kGzCXcQB/Porsche.png" alt="">
            </div>

            <div class="images" id="four">
                <img class="cars" id="dodge" src="https://i.postimg.cc/3RL7z7Wj/Dodge.png" alt="">
            </div>

            <div class="images" id="five">
                <img class="cars" id="chevrolet" src="https://i.postimg.cc/1zrycDQj/Chevrolet.png" alt="">
            </div>
</div>
<script>
                var myIndex = 0;
                carousel();

                function carousel() {
                var i;
                var x = document.getElementsByClassName("images");
                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";  
                }
                myIndex++;
                if (myIndex > x.length) {myIndex = 1}    
                x[myIndex-1].style.display = "block";  
                setTimeout(carousel,2000); // Change image every 2 seconds
                }
        </script>

background forms html

如何合并以下表格和以下背景？

问题描述

解决方法

相关问答