Question

我想在页面上有两种背景颜色，一种颜色在元素上方（例如图片，文本），另一种颜色在元素下面。优选地，在HTML，CSS或JavaScript中。

我知道CSS渐变，但是，无论页面有多大或多小，我都希望颜色始终低于或高于元素。

有没有办法实现这个目标？

Answer 1

您只需将内容与两个div分开即可。示例（您可以在bg-one或bg-two中添加一些内容进行测试）：

＆＃13;

body,
html {
  margin: 0;
  padding: 0;
}
.wrapper {
  width: 900px;
  margin: 0 auto;
}
.bg-one,
.bg-two {
  padding: 1em;
}
.bg-one {
  background-color: pink;
}
.bg-two {
  background-color: orange;
}

＆＃13;

<div class="wrapper">
  <div class="bg-one">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
  <div class="bg-two">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
</div>

＆＃13;

如果我不理解您的问题，并且您想要将整个背景的颜色更改为某个元素，请告诉我。

编辑：这是使用jQuery做一些好事的另一种方法（如果它不能在iFrame中工作，这里是codepen：http://codepen.io/mbrillaud/pen/VLNMzz）＆gt;

＆＃13;

$(window).on('load scroll resize', function() {
  var scrollTop = $('body').scrollTop(),
    breakPoint = $('#bg-two').offset().top,
    $body = $('body');
  if (scrollTop > breakPoint) {
    $body.css('background-color', 'orange');
  } else {
    $body.css('background-color', 'pink');
  }
});

＆＃13;

body,
html {
  margin: 0;
  padding: 0;
}
body {
  background-color: pink;
  transition: background-color .4s;
}
.wrapper {
  width: 900px;
  margin: 0 auto;
}
.bg-one,
.bg-two {
  padding: 1em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="bg-one">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
  <div class="bg-two" id="bg-two">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
</div>

＆＃13;

Answer 2

您希望绝对定位DIV并设置背景颜色和z-index属性。我可以举例说明，但我需要更多关于你想要实现的目标。

Answer 3

您可以使用CSS： $（“＃element”）。css（{background-color：black; border-top：solid 2px＃0000}）;

或样式文件：

 element{
background-color: #fff;
border-top: solid 10px #000;  
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
 }

Answer 4

你创建一个具有绝对位置的div，将它放在你的另一个元素上，在这种情况下，它是一个带文本的红色div。

＆＃13;

.content {
    position: relative;
    width: 200px;
}
.text {
    background: #f00;
    height: 200px;
}

.blackScreen {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
}

＆＃13;

<div class="content">
    <div class="text">
        nice text
    </div>
    <div class="blackScreen"></div>
</div>

＆＃13;

在页面上的某个元素下设置背景颜色 - HTML，CSS

4 个答案: