Question

我真的非常糟糕，我的背景图像不起作用。这是我的CSS文件：

body
        {
            background-image:url('college_monitor.jpg');
            background-position:left center;
            background-repeat: no-repeat;
            background-size:contain;
        }

图像与html和css文件位于同一文件夹中。

我的一些css部门也不能正常工作，这是我的分歧：

#FullName
        {
            margin-top:10px;
            margin-left:400px;
        }
        #FirstName
        {
            font-size:0.9em;
            color: cornflowerblue;
            border: 2px solid lime;
            border-radius: 25px;
            background-color: black;
            margin: 20px; 
            width: 150px;
            text-align:center;
        }
        #FatherName
        {
            font-size:0.9em;
            color: cornflowerblue;
            border: 2px solid lime;
            border-radius: 25px;
            background-color: black;
            margin: 20px; 
            width: 150px;
            text-align:center;
        }
        #LastName
        {
            font-size:0.9em;
            color: cornflowerblue;
            border: 2px solid lime;
            border-radius: 25px;
            background-color: black;
            margin: 20px; 
            width: 150px;
            text-align:center;
        }
        #Diploma
        {
            margin-left:400px;
            font-size:0.9em;
            color: cornflowerblue;
            border: 2px solid lime;
            border-radius: 25px;
            background-color: black;
            margin: 20px; 
            width: 150px;
            text-align:center;
        }
        #HighSchool
        {
            margin-left:400px;
            font-size:0.9em;
            color: cornflowerblue;
            border: 2px solid lime;
            border-radius: 25px;
            background-color: black;
            margin: 20px; 
            width: 150px;
            text-align:center;
        }

和html文件：

<div id="FullName">
                        <div id="FirstName"><b><h3>First name:</h3></b></div>
                            <input  class="input" maxlength="10" name="first" type="text" value="" size="30" />

                        <div id="FatherName"><label><b><h3>Father name:</h3></b></div>
                            <input  class="input" maxlength="10" name="father" type="text" value="" size="30" />
                        <div id="LastName"><b><h3>Last name:</h3></b></div>
                            <input  class="input" maxlength="10" name="last" type="text" value="" size="30" />
                    </div>
                    <div id="Uni">
                        <div  id="Diploma"><h3>Diploma:</h3></b></div> 
                        <input type="radio" name="where" value="sv" size="30" /> sv
                        <input type="radio" name="where" value="sg" size="30" /> sg
                        <input type="radio" name="where" value="se" size="30" /> se
                        <input type="radio" name="where" value="lh" size="30" /> lh
                        <input type="radio" name="where" value="freshman" size="30" /> freshman


                        <div  id="HighSchool"><b><h3>High School:</h3></b></div>
                            <input  class="input" maxlength="10" name="hight" type="text" value="" size="30" />

＆＃34; margin-left＆＃34;不在文凭和高中部门工作我的代码出了什么问题？谢谢，约翰尼拉

Answer 1

在你的CSS中：

#Diploma {
    margin-left: 400px;
    font-size: 0.9em;
    color: cornflowerblue;
    border: 2px solid lime;
    border-radius: 25px;
    background-color: black;
    margin: 20px; 
    width: 150px;
    text-align: center;
}

margin: 20px覆盖margin-left: 400px;，表示所有方向的保证金均为20px。如果您正在寻找快速解决方案，只需在#Uni之后添加#FullName。

#FullName, #Uni {
    margin-top:10px;
    margin-left:400px;
}

对于背景问题，如果我的图片工作正常，我已经创建了fiddle here。如果您提供的HTML是您的所有HTML代码，那么您应该添加<body></body>标记。如果它仍然无法正常工作，则图像文件必定存在问题，尝试重新生成或使用其他文件。

顺便说一句，你应该真正美化你的HTML / CSS代码（至少适当地缩进它）。

CSS背景图像和一些部门不起作用

1 个答案: