如何设置html元素填充颜色与正文颜色相同

Posted 2023-03-06

【中文标题】如何设置html元素填充颜色与正文颜色相同

【英文标题】：How to set html element padding color same as body color

【发布时间】：2021-02-05 01:52:02

【问题描述】：

我在页面底部有一个固定元素，它位于所有其他元素的顶部。它大约是页面宽度的 33%。 当我滚动页面时，其他元素继续在这个元素后面。

我想要的是这个元素的顶部和其他元素开始隐藏的位置之间的一点距离。这很容易实现。 但我的要求是让这个间隙的颜色与该垂直位置的身体颜色相同。

是否可以最好不使用 javascript？

这个小提琴中的白色区域是我想要的与身体颜色相同的区域（在那个垂直位置）：https://jsfiddle.net/f5qnv8bL/1/

Check this image

body 
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;
  height: 2000px;

<div style="background-color:green; float:right; height:750px;">
Something here
</div>

<div style="background-color:white; height: 120px; position:fixed; bottom:0; right:0; width: 400px;">
  <div style="background-color:red; height: 100px; position:fixed; bottom:0; right:0; width: 400px;">
  </div>
</div>

【问题讨论】：

为什么不为两者创建 CSS 类？例如。 .yellow-background background: -webkit-gradient ..... 然后body class="yellow-background" 以及你的gap div？

谢谢，这很有效，我应该在发布问题之前尝试一下。但它不适用于我在线性渐变中使用具有不同 alpha 值的相同颜色（而不是使用不同颜色）的某些用例。在某些页面上，还有图像（用作背景）以及叠加在其上的渐变色。请查看我对@coolmatt4321 的回答以及fiddle 的评论。有什么想法让它适用于这些情况吗？

【参考方案1】：

这是你的意思吗？

html：

<div style="background-color:green; float:right; height:750px;">
Something here
</div>

<div id="whatever" style="background-color:white; height: 120px; position:fixed; bottom:0; right:0; width: 400px;">
  <div style="background-color:red; height: 100px; position:fixed; bottom:0; right:0; width: 400px;">
  </div>
</div>

CSS：

body 
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;
  height: 2000px;


#whatever 
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;

【讨论】：

非常感谢，这在很多情况下解决了我的问题。但我很抱歉，我没有在我的问题中给出完整的图片。在许多页面上，我没有在渐变中使用两种颜色，而是使用具有不同 alpha 值的 相同颜色，例如检查这个小提琴：link。在这里，我使用了from(#f5ec42ff), to(#f5ec42bb))。在这种情况下，填充不与主体混合。在某些情况下，还有一个图像也用于背景和渐变色。有什么建议可以包含这些案例吗？

我绞尽脑汁在网上搜索，但一无所获。我会考虑针对这些案例发布一个新问题，因为这里有很多比我更聪明的人可以回答你的问题。

【参考方案2】：

评论区@Expressingx 的建议是对的，你可以试试给gap div加上相同的颜色。

添加 CSS：

.yes 
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;

并将yes 类添加到您的 HTML：

<div class="yes" style="height: 120px; position:fixed; bottom:0; right:0; width: 400px;">
  <div style="background-color:red; height: 100px; position:fixed; bottom:0; right:0; width: 400px;">
  </div>
</div>

我知道这不是灵丹妙药，但可以尝试一下。

【讨论】：

是的，谢谢，我为之前没有尝试过而感到难过。在少数情况下这不起作用（间隙颜色不与主体颜色混合）。我请求您看看我对@Expressingx 或coolmatt4321 的评论。这个fiddle 解释了其中一种情况。