Question

请查看下面的图片和代码。我正在制作简单的注册html表单。我试图保持在屏幕中间。另外，我只想让div背景不透明度达到50％，但不知何故，文字输入和按钮的不透明度也变为50％。请帮我找一个解决方案。

这是一个简单注册表单的代码。

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
</head>
<body background="back.jpg">
    <form>
        <div style="background-color: rgb(255,255,255); opacity: 0.5; display: inline-table; padding: 20px; border-radius: 25px;">
            <input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none;"><br><br>
            <input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
            <p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
            <input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
        </div>  
    </form>
</body>
</html>

See Output of the code above

请深刻解释或回答。提前致谢

Answer 1

如果你想让它的不透明度仅为50％<div style="background-color: rgb(255,255,255,.5); opacity: 0.5; display: inline-table; padding: 20px; border-radius: 25px;">，那么只需使用div的颜色代码，然后就不必使用div的不透明度。

首先为表单form{width:600px;margin:auto; display:block; }添加一些宽度，它会使您的表单处于中心位置。从顶部和底部给出边距给出这样的样式form{margin:150px auto;}，这样它也会从上到下给出边距。

Answer 2

试试这个代码将会运行

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
</head>
<body background="back.jpg">
    <form>
          <div style="background-color: rgba(255,255,255, .5); display: table; padding: 20px; border-radius: 25px; margin: 0px auto; text-align: center; top: 50%; left:50%; position: absolute; transform: translate(-50%, -50%)">
            <input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none; background: #fff;"><br><br>
            <input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
            <p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
            <input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
        </div>  
    </form>
</body>
</html>

Answer 3

显示代码：

＆＃13;

body {
    text-align: center;
}
form {
    display: inline-block;
}

＆＃13;

<html>
<head>
    <title>Sign Up</title>
</head>
<body background="back.jpg">
    <form>
        <div style="background-color: rgb(255,255,255,0.5);display: inline-table; padding: 20px; border-radius: 25px;">
            <input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none;"><br><br>
            <input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
            <p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
            <input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
        </div>  
    </form>
</body>
</html>

＆＃13;

Answer 4

我使用display：table（-X）属性

为您准备了一个代码段

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
</head>
<body background="back.jpg">

    <div style="display:table; height:calc(100vh - 50px); width:100%;"><!--  Change the "-50px" part to whatever size your navbar is -->
        <div style="display:table-row;">
            <div style="display: table-cell; vertical-align:middle; text-align:center;">
                <form style="margin:auto;">
                    <div style="background-color: rgb(255,255,255); opacity: 0.5; padding: 20px; border-radius: 25px;">
                        <input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none;"><br><br>
                        <input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
                        <p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
                        <input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

＆＃13;

希望这有帮助！

无法将<div>对齐在中心，无法正确管理不透明度

4 个答案: