卡在html / css问题上

Question

The issue I have is that the background for .para is not showing. 我的问题是.para的背景没有显示。 Its supposed to show in front of tile2 background image but it is not. 它应该显示在tile2背景图像的前面，但事实并非如此。 I am new to html and css but I learn fast. 我是html和css的新手，但我学得很快。 If anyone can pitch in and show me how to fix this and what I'm doing wrong it would be much appreciated. 如果有人可以介入并向我展示如何解决此问题以及我做错了什么，将不胜感激。 :) :)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding-top: 550px;
}
header {
  height: 605px;
  padding-top: 50px;

}
.main-nav,
.main {
  position: relative; 
}
.main-nav {
  background: #fff;
  height: 70px;
  z-index: 150;
  margin-bottom: -60px;
  box-shadow: 0 4px 6px rgba(0,0,0,.4);
  overflow: hidden;
  width:100%;
  padding-top:0px;
}
header,
.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
  list-style-type: none;
    margin-top: 0px;
    margin: 15;
    padding: 0;
    overflow: hidden;
}
.main-nav-scrolled {
    list-style-type: none;
    margin-top: 0px;
    margin: 15;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
.main {
  background-image: url("img/tiles2.png");
  background-attachment:fixed;
  padding: 120px 50px 50px;
  column-count: 2;
  column-gap: 40px;
}

/* ------------------------------------*/
.main-nav ul {
    width: 100%;
    list-style-type: none;
    margin-top: 0px;
    margin: 15;
    padding: 0;
    overflow: hidden;
    background-color: #333;


    }

.main-nav li {
    float: left;
}

.main-nav li:last-child {
    border-right: none;
}

.main-nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 26px 29px;
    text-decoration: none;
}

.main-nav li a:hover:not(.active2) {
    background-color: #111;
}

.main-nav .active2 {
    background-color: #4CAF50;
}


<!----------------------------------------------------------->

.para{
    position: relative;
    height:800px;
    display: inline-block;
    margin-left: 230px;
    margin-right: 50px;
    margin-top:30px;
    background-color: #FFFFFF;
    padding: 50px;
    font-size:200;
    font-family:verdana;
    line-height:2;
    overflow:auto;
}
</style>
</head>

<body>

<ul>
  <li><a class="active2" href="Index.html">Home</a></li>
  <li style="float:right"><a href="Competitions.html">Competitions</a></li>
  <li style="float:right"><a href="About.html">About</a></li>
</ul>

<header>
  <img src="img/aboutHeader2.png" alt="header" style="width:100%;">
</header>

<div class="main-nav">
  <ul>
  <li><a class="active2" href="Index.html">Home</a></li>
  <li style="float:right"><a href="Competitions.html">Competitions</a></li>
  <li style="float:right"><a href="About.html">About</a></li>
</ul>
</div>

<div class="main">
  <div class="background">

  </div>

  <div class="para">
     <p>Central Pennsylvania Music Teachers Association is an affiliate of the Pennsylvania Music Teachers Association and the Music Teachers National Association. Founded in 1846 by Theodore Presser in Delaware, Ohio, MTNA serves 25,000 independent music teachers committed to the pursuit of excellence in music teaching.

MTNA and its affiliates seek to promote the professional growth and development of its members and to further the art of music by providing programs that encourage and support teaching, performance, composition and scholarly research.

To receive membership applications, and additional information about our organization click MTNA APPLICATION

</p>
  </div>

  <div class="circles">

  </div>
</div>

<script src="js/jquery-1.9.js"></script>

<script>
var  mn = $(".main-nav");
    mns = "main-nav-scrolled";
    hdr = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});
</script>
</body>
</html>

Answer 1

Just remove the "comment" line: 只需删除“注释”行：

<!----------------------------------------------------------->

Or replace it with: 或替换为：

/* ----------------------------------------------------------- */

Answer 2

Here is a working JSFiddle 这是一个正在工作的JSFiddle

You just have to remove the false comment line 您只需要删除错误的注释行

<!------->

Answer 3

Just add .para p { background-color: white; 只需添加.para p {background-color：white; padding: 20px; 填充：20px; } }

卡在html / css问题上

问题描述

3 个解决方案

解决方案1
1 已采纳 2016-04-05 01:10:15

解决方案2
0 2016-04-05 01:17:18

解决方案3
0 2016-04-05 02:00:11

卡在html / css问题上

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-04-05 01:10:15

解决方案2 0 2016-04-05 01:17:18

解决方案3 0 2016-04-05 02:00:11

解决方案1
1 已采纳 2016-04-05 01:10:15

解决方案2
0 2016-04-05 01:17:18

解决方案3
0 2016-04-05 02:00:11