html 页面重复度高,html – CSS背景渐变重复问题

我有一个需要扩展宽度和高度的html页面,所以需要能够上下左右滚动,但是我似乎无法使css渐变重复-x并向下留下纯色.

剥离代码:

/p>

"http://www.w3.org/TR/html4/loose.dtd">

html {

height: 100%;

background-color: #366fcd; }

body {

margin: 0;

height: 100%;

width: 100%;

background-color: #366fcd;

background: -moz-linear-gradient(center top, #316494 0%,#366fcd 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, #366fcd));

background-repeat: repeat-x;

}

div#TheElement {

position: absolute;

width: 100px;

height: 100px;

background-color: #fff;

left: 2000px;

top: 2000px;

}

当您向下滚动时,这会将渐变运行为纯色(#366fcd),但是当您向右滚动时,渐变会停止,您也会看到纯色. See example.

如果我删除背景颜色:#366fcd;从html元素开始,然后渐变沿着x轴重复,但是当你向下滚动时,渐变停止并出现白色. See example.

我知道我总是可以使用背景图像,但更喜欢让CSS工作.

哦,是的,这是在OSX Lion的Chrome和FF上测试的.

安东尼

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/522542.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《阿里巴巴Android开发手册》v1.0.1更新,优化部分内容和示例代码

摘要: 春节余味尚未消,我们为移动开发者准备了一份迟到的新年礼物——《阿里巴巴Android开发手册》,继《阿里巴巴Java开发手册》之后,阿里巴巴开发规范家族又添一丁,「阿里巴巴Android开发规范」认证考试也同步上线。 …

java 如何循环执行一个对象_Java基础:如何定义好一个方法和进行方法重载

方法就是定义在类中的具有特定功能的一段独立小程序,可以完成特定功能的代码块在很多语言里都有函数的定义函数在java中也称为方法格式:修饰符 返回值类型 方法名(参数类型 参数名1,参数类型 参数名2,...){执行语句;return 返回值;}详细解释&…

再见!微服务

戳蓝字“CSDN云计算”关注我们哦!作者|马岛本文翻译自Alexandra Noonan 的 《Goodbye Microservices: From 100s of problem children to 1 superstar》内容是描述 Segment 的架构如何从 「单体应用」 -> 「微服务」 -> 「140 微服务」 -> 「单体应用」 的…

揭秘 | 直播美颜不靠脸 靠的是阿里云程序员?

摘要: 在这个看脸的时代,美颜已经成为必不可少的社交工具。不仅美颜相机成为了装机必备,各大直播APP也都相继推出美颜功能,利用摄像头对人脸进行追踪并叠加特效的新玩法也层出不穷。在市场热的背后,离不开技术支持。 点…

数据保护伞—为MaxCompute平台数据安全保驾护航

摘要: 数据安全是大数据发展道路上的重要挑战之一,数据,作为企业的核心资产,80%以上的核心信息是以结构化数据存储,包含个人身份证号、银行账号、电话、客户数据、医疗、交易、薪资等极其重要又敏感的信息。一旦发生数…

html5下拉列表多行显示不出来,为什么我这个代码的效果显示不出来?我要显示的是鼠标经过选项出现下拉菜单栏!求大神提点!!!...

动画菜单* { margin: 0; padding: 0; font-size: 14px; }a { color: #333; text-decoration: none }ul{ list-style: none; }.nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;}.nav li { float: left; position:relative; height:30px; wid…

jdk 安装 linux环境

文章目录一、查看jdk是否安装?二、安装jdk步骤2.1. 上传jdk到系统相应目录2.2. 解压2.1. 复制jdk目录2.3. 配置环境变量2.4. 保存退出2.5. 重新加载环境变量2.6. 验证是否安装成功一、查看jdk是否安装? java -version如果是空的,说明没有安装…

nginx 一个请求发给多台机器_一个机器人可以同时为多台数控机床上下料吗?东智力衡...

机床的装卸机器人是自动装卸功能,代替了CNC机床的装卸中的手动完成的工件。它主要适用于大量,高重复性或较重的工件使用,并且工作环境具有高温,粉尘等恶劣条件。具有定位准确,生产质量稳定,机床和刀具磨损减…

Kafka精华问答 | kafka节点之间如何备份?

戳蓝字“CSDN云计算”关注我们哦!Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写。作为一种高吞吐量的分布式发布订阅消息系统,有着诸多特性。今天,就让我们一起来看看关于它的精华问答吧!1Q&a…

阿里巴巴测试环境稳定性提升实践

摘要: 测试环境是研发/测试同学最常用的功能,稳定性直接影响到研发效率,那如何提升测试环境的稳定性?阿里巴巴应用与基础运维平台高级开发工程师张劲,通过阿里内部实践,总结了一套测试环境稳定性提升方法&a…

android中设置lmargin简书,超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用...

(一)前言本文主要会涉及到以下内容:微信开发者应用申请审核安装配置微信分享库微信好友/朋友圈功能实现(二)应用申请审核首先大家需要去微信开发平台去注册账号并且创建一个移动应用。(地址:https://open.weixin.qq.com)开始创建移动应用,填写应用名称,应用名称以及中英文的信息…

【干货合集】看完这些干货,再说你因为“怕蛇”,所以学不好Python!

摘要: 作为编程语言界的“当红小生”,Python不仅能够承担起Web项目的重任,还能够用于写自动化脚本帮助你做很多事情,不仅能够用于机器学习和神经网络的研究,还能够用于最具有业务价值的数据分析方面,无论什…

python到底能干啥-Python到底可以干什么?主要应用领域

如果说挑选一门编程语言进行学习,你会选择哪个?当然是Python。Python是一门简单的编程语言,适合初学者学习,也是很多人都喜欢的语言,那么Python到底可以干什么? Python语言在学术上是非常受欢迎的,不是计算机专业的人…

蜕变!网易轻舟微服务这波操作,始于异构融合、源于中台!

戳蓝字“CSDN云计算”关注我们哦!作者|刘晶晶提及中台,无人不知。从概念诞生于阿里到如今高居神坛之上,整个行业无一不在频繁建设中,不可否认,TA带来的ICT变革远远超过了字面含义。深入实践我们感受到,有了…

首次公开!菜鸟弹性调度系统的架构设计

摘要: 为什么菜鸟需要弹性调度? 在弹性调度出现之前,菜鸟整体资源使用率都处于一个比较低的水平,这是因为: 1.在线应用一般是通过单机性能压测,并且结合经验预估业务流量的方式来确定所需容器数量。这种方式…

springboot listener_看完这份springboot 全套面试提升宝典,面试不带怕的

简介:Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。通过这种方式,Spring Boot致力于在蓬勃发…

html中下边框过渡效果,CSS3 参与背景过度的属性有哪些(transition-property语法规则及多组过渡效果实例)...

CSS3 新增了背景或元素运动过度效果属性 transition,其中有一个取值为过渡实体 transition-property,也就是设置什么参与过渡,有多个实体可供选择,如常用背景颜色(background-color)、背景图象(background-image)、字体颜色(color…

“Java跌落向下,Python奋斗向前”,程序员:看哭了...

还记得被Java统治的时代吗?最近,这个格局已经被悄然打破,正是被来自曾经的小弟,新晋网红Python给硬生生拽下神坛。对此,Java曾表示强烈质疑,最近一份数据榜单悄悄来了!PLPY 8月榜单官宣&#xf…

注册docker hub账号

官网地址:https://hub.docker.com

浏览器渲染流水线解析与网页动画性能优化

摘要:若干年前,我写过一篇介绍浏览器渲染流水线的文章 - How Rendering Work (in WebKit and Blink),这篇文章,一来部分内容已经过时,二来缺少一个全局视角来对流水线整体进行分析,所以打算重新写一篇新的文…