如何在已具有渐变背景的容器顶部添加背景？

Question

所以，我有一个具有渐变背景的容器，但我想在容器顶部的某些文本中添加另一个不同颜色的渐变背景。以下是我所谈论的一个例子：

基本上我想要做的是将深灰色背景添加到容器的顶部，同时保持其下方的渐变背景。

感谢您的帮助

Answer 1

取决于渐变的方向。如果两者都是从上到下，您可以简单地在同一背景规则中将其写为一个渐变，使用两个不同颜色的相同像素或百分比值，您希望在两个渐变之间具有边界（此处为20％） ：

＆＃13;

＆＃13;

.x {
  width: 80%;
  margin: 30px auto;
  background: linear-gradient(to bottom, #6df 0%, #0d3 20%, #ffd 20%, #d90 100%);
}

＆＃13;

<div class="x">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim.</p>

  <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
    eleifend tellus.</p>

  <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
    Curabitur ullamcorper ultricies nisi.</p>

  <p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
    Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit
    cursus nunc,</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以制作div，为大部分背景设置渐变，制作子div，并为其设置新的背景颜色。这是一个例子：

#parent {background: black;
width: 100px;
height: 100px;
}
#child {background: grey; width: 100px; height: 20px;}
* {color: white;} /*so you can see text*/

<div id="parent"><div id="child">Special Text</div>Other gradient</div>

希望它有所帮助！