Question

这是我的html和css代码。我的策略似乎与第一张背景图片配合得很好，但是当我到达第二张背景图片时，它已经不再适用了。我在主要内容区域之外创建了一个舞台，将位置设置为相对然后包装我的2个背景，其位置为绝对，所以我可以手动定位它。但是，一旦我到达benefits-section div，它的行为就像这部分不再包含在content-wrapper div中。谁能发现我的问题？我还包括了一个网站实际看起来像是什么的图像。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Garcinia Cambogia</title>
  <link rel="stylesheet" href="css/style.css" type="text/css">
  </head>
  <body>
    <div class="stage">
      <div class="bg-wrapper">
      <img src='img/flower-background.jpg' id="bg" atl="flower background">
      <img src="img/middle-background.jpg" id="bg2" alt="benefits-section background">
    </div>
      <div class="content-wrapper">
      <nav>
        <h1>Produce</h1>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About the Product</a></li>
          <li><a href="#">Benefits</a></li>
          <li><a href="#">Testimonals</a></li>
          <li><a href="#">Buy</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Blog</a></li>
        </ul>
      </nav>
<div class="copy">
      <h2>Increase your <br> energy level with <br> <span>Garcinia Cambogia</span></h2>
      <img src="img/product.png" alt="Main Product">
      <div class="opt-in">
        <h2>Try it Out</h2>
          <form>
            <input type="text" value="Your Name*">
            <input type="text" value="Your Email*">
          </form>
          <div class="order-btn">
            <h2>Order Now</h2>
          </div>
      </div><!-- end of opt-in -->
    </div><!-- end of copy -->

    <div class="promo-section">
      <h1> About Garcinia Cambogia </h1>
      <h2> Reduce food intake and promote <span>weight loss fast</span>!</h2>
      <p>Effective thermogenic supplements are those that contain key ingredients that create a fat burning 'thermogenic'
          environment by working together and in synergy. Some of these ingredients also aid
          in reducing appetite and spiking an increase in short-term energy. Dosage of Garcinia cambogia, beginning
          from 750 mg to 1,500 mg, takes 2-3 times in individual dose before meals.
        </p>
        <h2> Other <span>Related</span> Products</h2>
        <ul>
          <div class="hover08">
            <div class="img-wrapper">
          <li><img src="img/Rasberry-product.png" alt="Rasberry Product"><a class="search" id="search1" href="#"><img src="img/search-icon.png" alt="search"></a></li>
        </div>
        <div class="img-wrapper">
            <li><img src="img/Garcinia-Cambogia.png" alt="Garcinia"><a class="search" id="search2" href="#"><img src="img/search-icon.png" alt="search"></a></li>
        </div>
        <div class="img-wrapper">
            <li id="mango-ketone"><img src="img/Mango-Ketone.png" alt="Mango Product"><a class="search" id="search3" href="#"><img src="img/search-icon.png" alt="search"></a></li>
        </div>
        </ul>
      </div><!-- end of hover08 -->
    </div><!-- end of promo-section -->
  <div class="benefits-section clear">
    <h1> What are the benefits </h1>
    <h2> Obesity is an imbalance between fat intake and energy expenditure.
          Now day obesity is a problem of health and mind in many people.</h2>
    <p>The rush hours working lifestyle make many people take junk food and fast food more than nutritionists.
        The important factor is Generic, it is found that one obese patient has a 40% chance of obesity and both
        obese patients have 80% chance of obesity. The chronic diseases that are developed from obesity are
        diabetes, high blood pressure, stroke, heart attack, cancer, gout and sleep apnea. So control the weight
        is the best way to void health problem.

        Control the body weight helps you against the chronic diseases and make good looking. There are many
        ways to reduce and control the weight. Using weight control products is not the best way, especially use
        potential dangerous diet products without consult from the doctors or the pharmacists. Balance the energy
         expenditure and fat intake is an important point. If you eat more you have to exercise more. Other ways
        are break bad habits such as alcohol intake, watching T.V. during eating, or ignore vegetables. You have
        to realize how much the fat in each menu and should the low cholesterol with high nutrition.</p>
  </div>

  </div><!-- end of content-wrapper -->
</div><!-- end of stage -->
  <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
  </body>
</html>


@font-face { font-family: 'Lucida Sans Demibold Roman'; src: url('../fonts/Lucida Sans Demibold Roman.ttf'); }

@font-face { font-family: 'Arizonia-Regular'; src: url('../fonts/Arizonia-Regular.ttf'); }.stage { position: relative; max-height: 100%; max-width: 100%; }

.content-wrapper { width: 960px; margin: 0 auto; position: relative; z-index: 2; }

.bg-wrapper { position: absolute; z-index: 1; left: 0; top: 0; min-width: 100% }

#bg { position: relative; top: 0; left:0; min-width: 100%; max-height: 760px; }

#bg2 { position: relative; top: 500px; left: 0; min-width: 100%; max-height: 702px; }

nav h1 { font-size: 69px; font-family: 'Arizonia-Regular'; letter-spacing: 0; text-align: center; color: #e0bd67; margin-bottom: 15px; margin-top: 15px; }

nav ul { list-style-type: none; padding: 0; margin: 0; background-color: #c29f4d; box-shadow: 5px 5px 1px #808279; height: 50px; width: 100%; float: left; margin-bottom: 95px; }

nav ul li { display: inline; padding-right: 40px; padding: 16px 40px 16px 0; margin-top: 0; float: left;}

nav li:first-child { padding-left: 113.04px; }

nav li:last-child { padding-right: 113.04px; }

nav a { text-decoration: none; color: #fff; font-family: 'Lucida Sans Demibold Roman'; font-size: 16px; }

.copy { float: left; }

.copy h2 { font-family: 'Open Sans'; font-size: 34px; color: #fff; font-weight: bold; float: right; text-transform: uppercase; line-height: 34px; margin-bottom: 35px; margin-top: 0;}

.copy img { float: left; margin-top: 55px; }

.copy span { color: #ffd062; }

.opt-in { background-color: #d1aa50; width: 378px; height: 299px; float: right; margin-bottom: 78px;  }

.opt-in h2 {float: left; width: 301px; text-align: center; margin: 15px 38.5px; padding-bottom: 20px;  border-bottom: 2px solid #fff;  }

.opt-in input { width: 296px; height: 40px; background-color: #ecdcb7; margin: 7px 38.5px; padding-left: 5px; }

.order-btn h2 { border-bottom: none; }

.promo-section { float: left; }

.promo-section h1 { font-family: 'Open Sans'; font-size: 36px; text-transform: uppercase; color: #c29f4d; text-align: center; border-bottom: 2px solid #c29f4d; width: 795px; margin: 90px 82.5px 30px 82.5px; padding-bottom: 5px;  }

.promo-section h2 { text-align: center; font-size: 26px; color: #8e8e8e; }

.promo-section h2 span { color: #c29f4d; }

.promo-section p { text-align: center; color: #8e8e8e; font-family: 'Open Sans'; font-size: 16px;  }

.promo-section ul { list-style-type: none; margin-top: 30px; padding: 0;   }

.promo-section ul div li { display: inline; float: left; margin-right: 109.5px  }

#mango-ketone { margin-right: 0;}

.img-wrapper { position: relative; float: left; }

.hover08 li img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

.hover08 li:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); }

.hover08 a.search { position: absolute; top: 0px; right: 0px; opacity: 0; background-color: transparent; filter: alpha(opacity=0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

#search1 { top:71px; right: 200px;}

#search2 { top: 92px; right: 190px; }

#search3 { top: 67px; right: 100px; }

.hover08 li:hover a.search { opacity: 1; -webkit-transition-delay: .2s; transition-delay: .2s;}

.benefits-section { margin-top: 30px;  float: left; }

.benefits-section h1 { color: #fff;}

.clear { clear: both; }

我无法将我的内容叠加到背景图片上

0 个答案: