HTML中<h1>、<p>标签无法在<div>中显示及三色背景实现问题

Hey there! Let's work through your problems one by one—first figuring out why your text isn't showing up, then looking at cleaner ways to make that three-color background.

First: Why Your Text &

Chances are, the way you set up your background elements is blocking or hiding your text. Here are the most common culprits:

• Z-index issues: If you used position: absolute or fixed for your background divs, they might be sitting on top of your text. Check if your content elements have a higher z-index than the background layers.
• Text color matching background: If your text is the same color as the background, it'll be invisible—double-check the color property on your <h1> and <p>.
• Elements are hidden or off-screen: Use your browser's dev tools (F12) to inspect the <h1> and <p> tags. See if they have display: none, visibility: hidden, or if they're positioned outside the viewport (like negative margins or top/left values that push them out).
• Overflow settings: If your parent div has overflow: hidden, it might be clipping the text inside.

Better Ways to Create a Three-Color Background #

Your current method might be overcomplicating things. Here are two straightforward, text-friendly approaches:

1. CSS Linear Gradient (Simplest Option) #

This lets you create a three-color background directly on the body (or any container) without extra divs—so your text will naturally sit on top.

For a horizontal split (three equal vertical sections):

body {
  margin: 0;
  min-height: 100vh; /* Makes the background cover the full viewport height */
  /* 90deg = horizontal split; adjust percentages to change section widths */
  background: linear-gradient(90deg, 
    #ff6b6b 33.33%, 
    #4ecdc4 33.33%, 
    #4ecdc4 66.66%, 
    #ffe66d 66.66%
  );
}

.content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff; /* Pick a color that contrasts with all three backgrounds */
}

HTML:

<body>
  <div class="content">
    <h1>Your Heading Here</h1>
    <p>Your paragraph text will show up perfectly here!</p>
  </div>
</body>

Want a vertical split instead? Just change 90deg to 0deg and adjust the percentages to control height sections.

2. CSS Grid (For More Control) #

If you need separate background elements (for hover effects, animations, etc.), Grid is a clean way to lay them out without overlapping text.

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
  position: relative; /* Lets us position content absolutely inside */
}

.bg-1 { background-color: #ff6b6b; }
.bg-2 { background-color: #4ecdc4; }
.bg-3 { background-color: #ffe66d; }

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers content perfectly */
  z-index: 1; /* Ensures content stays above background layers */
}

HTML:

<body>
  <div class="bg-1"></div>
  <div class="bg-2"></div>
  <div class="bg-3"></div>
  <div class="content">
    <h1>Hello World</h1>
    <p>No more hidden text!</p>
  </div>
</body>

Quick Fix for Your Original Setup #

If you want to stick with your initial approach, just add z-index: 1 to your content container (the one holding <h1> and <p>) and make sure your background elements have a lower z-index (like z-index: 0). Also, double-check that your content isn't being pushed off-screen by margins or positioning.

内容的提问来源于stack exchange，提问作者Birchtreee1000