字体背景颜色无法正常工作

时间：2021-02-02 13:25:22

标签： html css background-color 

body {
  margin: 0;
  background-color: white;
  background: linear-gradient(to right, #000000, #ffffff, #ffffff, #000000);
  line-height:25px;
}
h2{
    color: black;
    text-align: center;
    display: block;
    font-family: 'Montserrat', sans-serif;
    padding-left: 14px;
    font-size: 16px;
    text-decoration: none;
    font-weight: normal;
    background-color: orange;
}

p{
    margin: auto;
    width: 32%;
    color: black;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    padding-bottom: 14px;
    font-size: 12px;
    text-decoration: none;
}

form{
    margin: auto;
    width: 32%;
    color: black;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
     
}

input[type=text], select {
  display: block;
  margin: 8px 0;
}
input[type=date], select {
  display: block;
  margin: 8px 0;
}
input[type=submit], select {
  margin-left: 50%;
  margin-top: 10%
}

.nadpis{
    color: black;
    text-align: center;
    display: block;
    font-family: 'Montserrat', sans-serif;
    padding-left: 14px;
    font-size: 32px;
    text-decoration: none;
    font-weight: bold;
}
<!DOCTYPE html>
<html lang="cs">
    <head>
        <title>Hlavní stránka</title>
        <link rel='icon' href='favicon.ico?' type='image/x-icon'/>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style></style>                                                       
    </head>
    <body>
        <h1 class="nadpis">Vítejte v online dotazníku</h1>
        <h2>Vyplnění tohoto formuláře pomůže mé práci</h2>
        <br>

        <form action="https://youtu.be/dQw4w9WgXcQ">
            <label>
              Jméno:<input type="text" name="jmeno" required />
            </label>

            <label>
              Příjmení:<input type="text" name="prijmeni" required />
            </label>



            Pohlaví:
            <br>
            <input type="radio" name="pohlavi" value="muz" required>
            <label for="muz">Muž</label><br>
            <input type="radio" name="pohlavi" value="zena">
            <label for="zena">Žena</label><br>

            <label>
            Datum narození:<input type="date" name="narozeniny" required />
            </label>

        <h2>Teď k Vašim preferencím</h2>

            Kde všude hrajete hry:
            <br>
            <input type="checkbox" name="pc" value="pc">
            <label for="pc">Počítač</label><br>
            <input type="checkbox" name="konzole" value="konzole">
            <label for="konzole">Konzole</label><br>
            <input type="checkbox" name="mobile" value="Telefon">
            <label for="mobile">Telefon</label><br>

            Jak moc jste spokojeni s vládními opatřeními:
            <br>
            <label>
                <input type="range" name="spoko" min="0" max="50" required>
            </label><br>


            Vyberte vaši oblíbenou barvu:
            <br>
            <label>
                <input type="color" name="barva">
            </label>           

            <br>
            <input type="submit" value="Submit">
        </form>

    </body>
</html>

我正在尝试为学校项目制作一个简单的表单页面。 代码以某种方式完成了，我已经发送了它，但现在我只是想让它看起来更好 - 我添加了一些背景颜色：橙色到 h2 只是为了测试它，但它并不能正常工作。

body {
  margin: 0;
  background-color: white;
  line-height: 25px;
}

h2 {
  color: black;
  text-align: center;
  display: block;
  font-family: 'Montserrat', sans-serif;
  padding-left: 14px;
  font-size: 16px;
  text-decoration: none;
  font-weight: normal;
  background-color: orange;
}

p {
  margin: auto;
  width: 32%;
  color: black;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  padding-bottom: 14px;
  font-size: 12px;
  text-decoration: none;
}

form {
  margin: auto;
  width: 32%;
  color: black;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
}

input[type=text],
select {
  display: block;
  margin: 8px 0;
}

input[type=date],
select {
  display: block;
  margin: 8px 0;
}

input[type=submit],
select {
  margin-left: 50%;
  margin-top: 10%
}

.nadpis {
  color: black;
  text-align: center;
  display: block;
  font-family: 'Montserrat', sans-serif;
  padding-left: 14px;
  font-size: 32px;
  text-decoration: none;
  font-weight: bold;
}
<!DOCTYPE html>
<html lang="cs">

  <head>

    <title>Hlavní stránka</title>
    <link rel='icon' href='favicon.ico?' type='image/x-icon' />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style></style>


  </head>

  <body>
    <h1 class="nadpis">Vítejte v online dotazníku</h1>
    <h2>Vyplnění tohoto formuláře pomůže mé práci</h2>
    <br>



    <form action="https://youtu.be/dQw4w9WgXcQ">
      <label>
          Jméno:<input type="text" name="jmeno" required />
      </label>

      <label>
          Příjmení:<input type="text" name="prijmeni" required />
      </label> Pohlaví:
      <br>
      <input type="radio" name="pohlavi" value="muz" required>
      <label for="muz">Muž</label><br>
      <input type="radio" name="pohlavi" value="zena">
      <label for="zena">Žena</label><br>

      <label>
          Datum narození:<input type="date" name="narozeniny" required />
      </label>

      <h2>Teď k Vašim preferencím</h2>

      Kde všude hrajete hry:
      <br>
      <input type="checkbox" name="pc" value="pc">
      <label for="pc">Počítač</label><br>
      <input type="checkbox" name="konzole" value="konzole">
      <label for="konzole">Konzole</label><br>
      <input type="checkbox" name="mobile" value="Telefon">
      <label for="mobile">Telefon</label><br> Jak moc jste spokojeni s vládními opatřeními:
      <br>
      <label>
          <input type="range" name="spoko" min="0" max="50" required>
      </label><br> Vyberte vaši oblíbenou barvu:
      <br>
      <label>
          <input type="color" name="barva">
      </label>

      <br>
      <input type="submit" value="Submit">
    </form>

  </body>

</html>

如您所见，第一个 h2 文本具有整个页面的背景颜色，而表单中的 h2 文本仅位于页面的白色背景中... 即使是关于其他代码的任何提示，我都非常高兴，谢谢。

3 个答案:

答案 0 :(得分：0)

您可以在一个 div 中添加第一个 h2 并按照这个 div 添加 css，就像这样 .heading h2{background-color: orange;}

body {
  margin: 0;
  background-color: white;
  line-height:25px;
}
h2{
  color: black;
  display: block;
  font-family: 'Montserrat', sans-serif;
  padding-left: 14px;
  font-size: 16px;
  text-decoration: none;
  font-weight: normal;  
}

.heading {
  text-align: center;
}

.heading h2 {
  background-color: orange;
}


p{
  margin: auto;
  width: 32%;
  color: black;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  padding-bottom: 14px;
  font-size: 12px;
  text-decoration: none;
}

form{
  margin: auto;
  width: 32%;
  color: black;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;

}

input[type=text], select {
  display: block;
  margin: 8px 0;
}
input[type=date], select {
  display: block;
  margin: 8px 0;
}
input[type=submit], select {
  margin-left: 50%;
  margin-top: 10%
}
.nadpis{
  color: black;
  text-align: center;
  display: block;
  font-family: 'Montserrat', sans-serif;
  padding-left: 14px;
  font-size: 32px;
  text-decoration: none;
  font-weight: bold;
}
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

<h1 class="nadpis">Vítejte v online dotazníku</h1>
<div class="heading"><h2>Vyplnění tohoto formuláře pomůže mé práci</h2></div>
<br>
<form action="https://youtu.be/dQw4w9WgXcQ">
    <label>
    Jméno:<input type="text" name="jmeno" required />
    </label>

    <label>
    Příjmení:<input type="text" name="prijmeni" required />
    </label>
    Pohlaví:
    <br>
    <input type="radio" name="pohlavi" value="muz" required>
    <label for="muz">Muž</label><br>
    <input type="radio" name="pohlavi" value="zena">
    <label for="zena">Žena</label><br>

    <label>
    Datum narození:<input type="date" name="narozeniny" required />
    </label>

    <h2>Teď k Vašim preferencím</h2>

    Kde všude hrajete hry:
    <br>
    <input type="checkbox" name="pc" value="pc">
    <label for="pc">Počítač</label><br>
    <input type="checkbox" name="konzole" value="konzole">
    <label for="konzole">Konzole</label><br>
    <input type="checkbox" name="mobile" value="Telefon">
    <label for="mobile">Telefon</label><br>

    Jak moc jste spokojeni s vládními opatřeními:
    <br>
    <label>
    <input type="range" name="spoko" min="0" max="50" required>
    </label><br>
    Vyberte vaši oblíbenou barvu:
    <br>
    <label>
    <input type="color" name="barva">
    </label>
    <br>
    <input type="submit" value="Submit">
</form>

答案 1 :(得分：0)

您的表单宽度为 32%，而您的 <h2> 标签位于您的表单内，因此说明背景仅覆盖了其中的 32%。或者，您可以使用 <div> 包装您的内容，并使用 flexbox 和 justify-content 使其居中。

我附上了下面的示例代码。您可以进一步添加 CSS 以进一步设置样式，例如边距和填充。

<!DOCTYPE html>
<html lang="cs">
<head>
  
    <title>Hlavní stránka</title>
            <link rel='icon' href='favicon.ico?' type='image/x-icon'/>
            <link rel="preconnect" href="https://fonts.gstatic.com">
            <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
background-color: white;

line-height:25px;
}
h2{
    color: black;
    text-align: center;
    display: block;
    font-family: 'Montserrat', sans-serif;
    padding-left: 14px;
    font-size: 16px;
    text-decoration: none;
    font-weight: normal;
    background-color: orange;
}


p{
    margin: auto;
    width: 32%;
    color: black;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    padding-bottom: 14px;
    font-size: 12px;
    text-decoration: none;
}

form{
    margin: auto;
    
    color: black;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
     
}

input[type=text], select {
display: block;
margin: 8px 0;
}
input[type=date], select {
display: block;
margin: 8px 0;
}
input[type=submit], select {
margin-left: 50%;
margin-top: 10%
}



.nadpis{
    color: black;
    text-align: center;
    display: block;
    font-family: 'Montserrat', sans-serif;
    padding-left: 14px;
    font-size: 32px;
    text-decoration: none;
    font-weight: bold;
}

                                                                    



</style>                                                                            

  
</head>
    <body>
            <h1 class="nadpis">Vítejte v online dotazníku</h1>
            <h2>Vyplnění tohoto formuláře pomůže mé práci</h2>
            <br>
            
    
    
            <form action="https://youtu.be/dQw4w9WgXcQ">
                <div style="display: flex; justify-content: center;"> 
                    <div>                
                        <label>
                        Jméno:<input type="text" name="jmeno" required />
                        </label>
                    
                        <label>
                        Příjmení:<input type="text" name="prijmeni" required />
                        </label>

                        Pohlaví:
                        <br>
                        <input type="radio" name="pohlavi" value="muz" required>
                        <label for="muz">Muž</label><br>
                        <input type="radio" name="pohlavi" value="zena">
                        <label for="zena">Žena</label><br>
                        
                        <label>
                        Datum narození:<input type="date" name="narozeniny" required />
                        </label>
                    </div>
                </div>

            <h2>Teď k Vašim preferencím</h2>
                <div style="display: flex; justify-content: center;"> 
                    <div>
                        Kde všude hrajete hry:
                        <br>
                        <input type="checkbox" name="pc" value="pc">
                        <label for="pc">Počítač</label><br>
                        <input type="checkbox" name="konzole" value="konzole">
                        <label for="konzole">Konzole</label><br>
                        <input type="checkbox" name="mobile" value="Telefon">
                        <label for="mobile">Telefon</label><br>
                        
                        Jak moc jste spokojeni s vládními opatřeními:
                        <br>
                        <label>
                        <input type="range" name="spoko" min="0" max="50" required>
                        </label><br>
                        
                        
                        Vyberte vaši oblíbenou barvu:
                        <br>
                        <label>
                        <input type="color" name="barva">
                        </label>
                        
                        
                    </div>
                </div> 
              
            
                <br>
                <input type="submit" value="Submit">
            </form>
 
  
            

        


    </body>
</html>

下面的代码使 <h2> 标签变小 

<!DOCTYPE html>
<html lang="cs">
<head>
  
    <title>Hlavní stránka</title>
            <link rel='icon' href='favicon.ico?' type='image/x-icon'/>
            <link rel="preconnect" href="https://fonts.gstatic.com">
            <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
background-color: white;

line-height:25px;
}
h2{
    color: black;
    text-align: center;
    display: block;
    font-family: 'Montserrat', sans-serif;
    padding-left: 14px;
    font-size: 16px;
    text-decoration: none;
    font-weight: normal;
    background-color: orange;
}


p{
    margin: auto;
    width: 32%;
    color: black;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    padding-bottom: 14px;
    font-size: 12px;
    text-decoration: none;
}

form{
    margin: auto;
    width: 32%;
    color: black;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
     
}

input[type=text], select {
display: block;
margin: 8px 0;
}
input[type=date], select {
display: block;
margin: 8px 0;
}
input[type=submit], select {
margin-left: 50%;
margin-top: 10%
}



.nadpis{
    color: black;
    text-align: center;
    display: block;
    font-family: 'Montserrat', sans-serif;
    padding-left: 14px;
    font-size: 32px;
    text-decoration: none;
    font-weight: bold;
}

                                                                    



</style>                                                                            

  
</head>
    <body>
            
            
    
    
            <form action="https://youtu.be/dQw4w9WgXcQ">
                <h1 class="nadpis">Vítejte v online dotazníku</h1>
            <h2>Vyplnění tohoto formuláře pomůže mé práci</h2>
            <br>
                <label>
                Jméno:<input type="text" name="jmeno" required />
                </label>
            
                <label>
                Příjmení:<input type="text" name="prijmeni" required />
                </label>
              
                
              
                Pohlaví:
                <br>
                <input type="radio" name="pohlavi" value="muz" required>
                <label for="muz">Muž</label><br>
                <input type="radio" name="pohlavi" value="zena">
                <label for="zena">Žena</label><br>
                
                <label>
                Datum narození:<input type="date" name="narozeniny" required />
                </label>

            <h2>Teď k Vašim preferencím</h2>
                
                Kde všude hrajete hry:
                <br>
                <input type="checkbox" name="pc" value="pc">
                <label for="pc">Počítač</label><br>
                <input type="checkbox" name="konzole" value="konzole">
                <label for="konzole">Konzole</label><br>
                <input type="checkbox" name="mobile" value="Telefon">
                <label for="mobile">Telefon</label><br>
                
                Jak moc jste spokojeni s vládními opatřeními:
                <br>
                <label>
                <input type="range" name="spoko" min="0" max="50" required>
                </label><br>
                
                
                Vyberte vaši oblíbenou barvu:
                <br>
                <label>
                <input type="color" name="barva">
                </label>
                
                
                
              
            
                <br>
                <input type="submit" value="Submit">
            </form>
  
  
            

        


    </body>
</html>

答案 2 :(得分：0)

根据您的最后一条评论，您希望第一个 h2 仅与表单内的 h2 一样宽。由于表单的宽度为 32%，您可以添加以下规则：

body>h2 {
  width: 32%;
  margin-left: 34%;
}

这会将所有 h2 的宽度（body 的直接子代）定义为 32% 并将其居中（margin-left 为 34%，即 100% 减去32% 除以 2)：

body {
  margin: 0;
  background-color: white;
  line-height: 25px;
}

h2 {
  color: black;
  text-align: center;
  display: block;
  font-family: 'Montserrat', sans-serif;
  padding-left: 14px;
  font-size: 16px;
  text-decoration: none;
  font-weight: normal;
  background-color: orange;
}

body>h2 {
  width: 32%;
  margin-left: 34%;
}

p {
  margin: auto;
  width: 32%;
  color: black;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  padding-bottom: 14px;
  font-size: 12px;
  text-decoration: none;
}

form {
  margin: auto;
  width: 32%;
  color: black;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
}

input[type=text],
select {
  display: block;
  margin: 8px 0;
}

input[type=date],
select {
  display: block;
  margin: 8px 0;
}

input[type=submit],
select {
  margin-left: 50%;
  margin-top: 10%
}

.nadpis {
  color: black;
  text-align: center;
  display: block;
  font-family: 'Montserrat', sans-serif;
  padding-left: 14px;
  font-size: 32px;
  text-decoration: none;
  font-weight: bold;
}
<!DOCTYPE html>
<html lang="cs">

<head>

  <title>Hlavní stránka</title>
  <link rel='icon' href='favicon.ico?' type='image/x-icon' />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style></style>


</head>

<body>
  <h1 class="nadpis">Vítejte v online dotazníku</h1>
  <h2>Vyplnění tohoto formuláře pomůže mé práci</h2>
  <br>



  <form action="https://youtu.be/dQw4w9WgXcQ">
    <label>
          Jméno:<input type="text" name="jmeno" required />
      </label>

    <label>
          Příjmení:<input type="text" name="prijmeni" required />
      </label> Pohlaví:
    <br>
    <input type="radio" name="pohlavi" value="muz" required>
    <label for="muz">Muž</label><br>
    <input type="radio" name="pohlavi" value="zena">
    <label for="zena">Žena</label><br>

    <label>
          Datum narození:<input type="date" name="narozeniny" required />
      </label>

    <h2>Teď k Vašim preferencím</h2>

    Kde všude hrajete hry:
    <br>
    <input type="checkbox" name="pc" value="pc">
    <label for="pc">Počítač</label><br>
    <input type="checkbox" name="konzole" value="konzole">
    <label for="konzole">Konzole</label><br>
    <input type="checkbox" name="mobile" value="Telefon">
    <label for="mobile">Telefon</label><br> Jak moc jste spokojeni s vládními opatřeními:
    <br>
    <label>
          <input type="range" name="spoko" min="0" max="50" required>
      </label><br> Vyberte vaši oblíbenou barvu:
    <br>
    <label>
          <input type="color" name="barva">
      </label>

    <br>
    <input type="submit" value="Submit">
  </form>

</body>

</html>

相关问题
最新问题