- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我研究了 5 个 SO 问题,但它们都在谈论如何去做。
有一道题还讲到为什么background对body和html标签有特殊行为。
但我的问题是:为什么固定附件会使渐变出现在整个页面上?
我的意思是,让我们以 200 x 200 像素的图像作为背景。即使我们滚动页面,它也会保持固定。 (假设应用了 background-attachment: fixed;
属性)。
但是当我们在 body 标签上添加渐变作为背景时,它会延伸到整个页面。现在我研究了渐变应该像那样工作。好的,我明白了。但当 background-attachment: fixed;
未指定时,它不会出现在整个页面上。它会重复。
为什么 background-attachment: fixed
使渐变在整个页面上拉伸(stretch)?当我们使用普通图像时,这不会发生。
所以我的问题是:为什么当我们应用 background-attachment: fixed
属性时会出现这种行为?
唯一应该出现的行为是梯度应该保持固定。就是这样。因为这就是这个属性的用途。
<style>
body
{
background: linear-gradient(skyblue, orange);
background-attachment: fixed;
}
</style>
最佳答案
当你说:
"...But when we add gradient as a background on body tag, it stretches to entire page. Now I have studied that gradients are supposed to work like that. ..."
你错了。梯度不应该是那样工作的。渐变只是一个 background-image
。就是这样。它们表现得像背景图像,因为它们是背景图像。
原因是,您看到行为不是,因为它们应该那样工作。之所以这样工作是因为它们是图像。但是,您没有明确定义大小。因此,如果没有明确的大小,它们就不能具有固有大小。这就是为什么它们匹配它们所在元素的大小。
来自这个引用: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
.. Like any other gradient, a CSS linear gradient is not a CSS color but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to...
为了实现您想要的效果,您需要应用与background-image
相关的所有属性。具体来说,background-size
,background-position
。完成后,您需要定义渐变。
演示 fiddle :http://jsfiddle.net/abhitalks/comsxw8m/
带有相关 CSS 的代码段:
body {
background-image: linear-gradient(to bottom, #fff 0%, #00f 100%);
background-repeat: no-repeat;
background-size: 120px 120px;
background-position: top center;
background-attachment: fixed;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
看到这个 fiddle :http://jsfiddle.net/abhitalks/comsxw8m/1/
这里将渐变应用于具有固定大小的 body 并重复。另一个渐变应用于 div
,它是 fixed
。希望现在你的想法更清楚了。
片段 2:
body {
background-image: linear-gradient(to bottom, #fff 0%, #0ff 100%);
background-repeat: repeat;
background-size: 64px 64px;
}
div {
width: 240px; height: 240px;
margin: 32px auto;
overflow: auto;
background-image: linear-gradient(to bottom, #fff 0%, #00f 100%);
background-repeat: no-repeat;
background-size: 120px 120px;
background-position: center center;
background-attachment: fixed;
}
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
关于html - 为什么背景附件: fixed makes the gradient to appear on entire page?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27032405/
我没有上传附件以使浏览器正常工作。 一些提示是 here , 其他 there . The docs非常好,但我无法将其转换为 AJAX 上传。 我正在寻找一个 super 简单的 HTML/Java
我有一个应用程序可以收集一些信息并允许用户使用 Android 的 Intent 框架共享这些信息。 到目前为止,它以纯文本形式共享报告:使用 putExtra(Intent.EXTRA_TEXT,
我正在尝试通过我的应用程序发布带有附件图片的消息,所以我使用了以下代码: function yamPost(mytoken) { var msg_Body = jQuery("#myB
我在用户表中使用了多对多关系来使登录用户关注另一个用户,但我自己没有弄清楚,我检查了其他人做了什么,并尝试做类似的事情,并且它有效。在我的方法中,我有: function follow(User $u
我正在用 PHP 创建脚本,其作用是将 IMAP 服务器备份到 MySQL 数据库。 我现在的问题是: 如果电子邮件有附件,附件是嵌入在电子邮件本身中还是服务器上的一个单独文件? 我问的原因是: 我可
我正在使用 RavenDB,在我处理任何附件之前删除了一些带有附件的测试文档,所以我在想它们是否还在磁盘上的某个地方,以及如何轻松地找到它们?。 另一个问题是:当文档被删除时,它有一个附件,附件会被自
当您使用 ACTION_SEND Intent (使用额外的 EXTRA_STREAM)将文件附加到电子邮件时,电子邮件应用程序是否将该附加文件复制到它自己的位置?我的应用程序创建了一个文件并将其附加
所以: // Setup mail class, recipients and body $mailer->AddAttachment('/home/mywebsite/public_html/fil
您好,我需要一个 DnD 解决方案来将 Outlook 邮件附件拖到 Stackpane。 JavaFX/展望 2010 stackpaneDragAndDropZone.setOnDragO
我尝试制作一个 PhpSpreadsheet 文档,然后将他添加到邮件附件中。也许是太热了,但在 phpSpreadsheet 文档中几个小时后,我还没有找到任何东西。 这是我发送邮件的文件 $nam
有什么方法可以动画删除 UITableView 单元格附件吗? 我当前正在显示一个 UITableViewCellAccessoryDisclosureIndicator,但我想在所有可见表格单元格上
我正在编写一个 iPhone 应用程序,它要求我以编程方式发送电子邮件附件。附件是我通过代码创建的 csv 文件。然后,我将文件附加到电子邮件中,附件就会显示在手机上。但是,当我向自己发送电子邮件时,
我正在尝试通过收件箱中的名称“MacroEnabled”访问子文件夹,找到其中的所有附件并将它们保存到本地驱动器。 我使用此代码创建一个名为“Documents”的文件夹并保存附件。然而,在进行第二次
将 corda 升级到版本 4 后,我收到 net.corda.core.transactions.MissingContractAttachments:找不到 com.template.contra
我正在尝试让 Jenkins 将一个或一组文件附加到作业已完成的电子邮件通知中。我不断收到以下错误: 发送电子邮件以触发:成功错误:访问要附加的文件时出错:需要 Ant GLOB 模式,但看到 C:\
我创建了一个由来自 mysql 的数据填充的 UITableView(使用 NSJSONSERIALIZATION)。现在问题是一回事。我检索到的是产品名称。我想要一个附件 View (像单元格右侧的
我开发了一个 Java 客户端应用程序,用于下载我自己的电子邮件。我发现我无法在电子邮件中找到某些附件,特别是当我向经过认证的公司发送电子邮件时收到的作为收据的 XML 文件。我用于下载附件的代码:
我正在将我的 sqlite 数据库转换为 Couchdb。我可以转换数据库并上传到 Couchdb 服务器。除了图像之外的一切。我想将图像作为独立附件上传,我想使用 javascript、REST 和
我编写了一段代码,以便能够启动默认的电子邮件服务提供商,即我的 Outlook。这是我的代码: if(role.getValue().equals("1")) { Desktop desktop =
我正在尝试使用链接上共享的代码使用 python 从 Gmail 下载电子邮件附件 https://gist.github.com/baali/2633554 我想应用时间过滤器+主题过滤器并下载附件
我是一名优秀的程序员,十分优秀!