带偏移量的 CSS 背景渐变

2024-06-28

我将渐变作为背景图像应用到我的身体上。然后我在顶部添加了 255px 偏移background-position:0 255px;.

它看起来相当不错,除了一个小问题:当然渐变不是在页面底部结束,而是在下面 255px 处结束。

有没有什么简单的方法可以让渐变在底部结束但以从 到 的偏移量开始?

http://jsfiddle.net/julian_weinert/ar6jC/ http://jsfiddle.net/julian_weinert/ar6jC/


你可以像这样实现你想要的:将你的背景放在0px 0px并定义一个具有更多色标的渐变,顶部有一个纯色区域,然后是实际渐变,如下所示:

background-position: 0px 0px;
background-image: linear-gradient(to bottom, 
    #FFFFFF 0px,     /* Have one solid white area */
    #FFFFFF 255px,   /* at the top (255px high). */
    #C4C7C9 255px,   /* Then begin the gradient at 255px */
    #FFFFFF 100%     /* and end it at 100% (= body's height). */
);  

(示例代码适用于最新版本的 Chrome 和 FireFox,但应用相同的原理,对其进行调整以支持所有主要浏览器和版本是简单的。)

另请参阅此简短的演示 http://jsfiddle.net/ExpertSystem/yyvT3/.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带偏移量的 CSS 背景渐变 的相关文章

  • 为什么 Chrome 80 会导致这个 grid-template-rows: auto 问题

    有人知道最新的 Chrome 80 更新有什么变化吗 似乎 grid template rows auto 即使标记中不存在给定行 从现在开始也会占用一些空间 仅发生在 Chrome 80 上 l page display grid gri
  • 使用 div 代替 table 进行布局

    我想知道什么方法最好将表格布局替换为 div 我自己也尝试过一些 但它让我的 4x4 div 非常混乱 我猜当有经验做这样的事情时 这并不是很难完成 但我对 div 都是新手 并试图学习这一点 看看这个并分享您对表格是否应该保持原样或者是否
  • 不显示 ul 中的项目符号 [重复]

    这个问题在这里已经有答案了 我在 ul 中显示项目符号时遇到问题 有谁知道问题出在哪里 my site http www minikoblizky wz cz zamestnanci html它以 Co od v s o ek v me 开
  • 为什么我的 css 在 IE9 中无法正确显示?

    几个小时前 我对我的 WordPress 主页做了一个小改动 现在 IE9 中出现了一些以前不存在的随机奇怪 CSS 问题 我曾使用 IE 的开发工具来尝试找出问题所在 但该工具与 firebug 相比实在是太糟糕了 而且问题只出现在 IE
  • 将 WooCommerce 属性标签替换为每个的自定义图像

    我正在做一个项目 我需要一些团体的帮助 我正在使用 woocommerce 产品系统 在商店存档页面产品上我显示属性标签 属性值 就像文本一样 属性标签 属性值 例如传输 手动 有没有办法将属性标签显示为图像 我无法添加 html 代码 i
  • 右侧对齐不浮动

    我有一个聊天小部件 我正在向其中添加一些样式 但是 我很难使 用户 聊天气泡与屏幕右侧对齐 当我使用向右浮动和向左浮动 另一侧 时 div 不再正确定位 因为它们似乎只是转到相对 div 的右侧 我希望它也能够附加 div 这将导致溢出 y
  • 与基线和文本区域垂直对齐

    我试图让标签与文本区域中第一行文本的基线对齐 天真的尝试 div style display inline block div
  • 如何水平和垂直对齐内联块

    什么是最好 最干净的使用CSS对齐 dates div位于标题的右侧 垂直于中间 I tried float right 但这不允许vertical align 我想避免使用浮动 所以我使用inline block 并使用相对定位 有没有更
  • 表格单元格中 ::after 上的位置在 Firefox 中不起作用?

    以下代码应创建一个跨越其父元素宽度 100 的伪元素 然而 这在 Firefox 中不起作用 但在 Chrome 中却有效 火狐浏览器似乎忽略了 parent s position relative 这是一个错误吗 HTML div cla
  • 在视口元标记中设置最小宽度

    我正在设计一个网页 响应式 屏幕的最小宽度应为 480px 我该怎么做 现在我将宽度固定为 480px 这在手机上看起来很完美 但在平板电脑上看起来相当大 对于大屏幕 宽度应该动态变化 我写了一个polyfill来添加min width到视
  • 位置:固定导航不会保持固定

    我正在开发的网站遇到了很多问题 甚至下载到缓慢的页面加载等等 但我遇到的最大问题是固定位置元素的行为 首先 导航应该始终保持固定 但事实并非如此 但是 如果您在滚动时重新加载 它确实会出现在页面中间 很奇怪 直播网站在这里 http www
  • CSS 网格具有不等高和宽的列

    我有 5 个盒子 三个在第一行 接下来的两个在第二行 I want all the boxes but the second to be of equal height and the 5th box to go right under t
  • 如何使用 JavaScript 对元素重新排序?

    我如何在不改变 HTML 源代码的情况下重新排序 div 例如 我希望 div 按 div2 div1 div3 的顺序出现 但在 HTML 中它们是 div div div div div div Thanks 没有一种通用的方法可以使用
  • Bootstrap 3 - 对齐列高

    创建一个用于教育目的的网站 但我遇到了网格 列高度问题 这是我尝试复制的网站图像 Click me https i stack imgur com dge5f jpg 这是我到目前为止所得到的 Click me https i stack
  • 如何像这样包裹div?

    假设您有一个具有固定高度和重量的 div 在图中是最里面的一个 并且您希望周围的 div 包含它 其外边距为例如1 厘米 你会怎么做 一种方法是使用inline block显示风格 div border 1px solid blue div
  • 通过 JavaScript 传输事件来调用 :hover 伪类

    这是场景 您有两张图像 它们彼此堆叠在一起 最高阶的 z 索引图像负责处理点击事件 想想 Google 的 Map API 并且是透明的 而下面的图像负责视觉表示 这是一个伪 HTML CSS 表示 div visual container
  • 输入宽度与文本区域宽度

    读完主题后输入尺寸与宽度 https stackoverflow com questions 1480588 input size vs width 我很清楚我们不应该使用 size 属性而应该使用 css 样式 输入 文本 和文本区域显示
  • Webkit 浏览器在确定表格布局中的单元格宽度时不考虑填充:已修复

    我在申请时得到不同的结果table layout fixed到表格并在单元格上使用填充 IE 和 Firefox 似乎可以通过将单元格宽度和填充加在一起来正常工作 Chrome 和 Safari 仅使用单元格宽度 我看到该问题存在一个错误
  • Visual Studio 2013 中的 JavaScript HTML5 CSS3 项目模板

    我刚刚下载了 Visual Studio 2013 Express for Web 我想知道如何部署仅限 JavaScript HTML5 和 CSS3 的项目 我找不到合适的模板或方法来做到这一点 我已经在网上搜索过JavaScript模
  • HTML/CSS:清除中间的浮动元素,而不添加不需要的标签[重复]

    这个问题在这里已经有答案了 大多数 ClearFix 技术都涉及在父容器的最底部添加内容 我最喜欢伪元素方法 因为它不会将不需要的元素添加到 HTML 中 然而 最近我发现我正在处理一个容器 其中有一些孩子漂浮 但不是全部 假设前 2 个子

随机推荐