html中写色块,CSS3 彩虹色块

CSS

语言:

CSSSCSS

确定

html,

body {

min-height: 100%;

}

body {

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBkMzI1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMjI0NSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');

background-size: 100%;

background-image: -moz-radial-gradient(#0d325c, #002245);

background-image: -webkit-radial-gradient(#0d325c, #002245);

background-image: radial-gradient(#0d325c, #002245);

}

.loveWins {

color: #fff;

font-size: 95px;

line-height: 100px;

margin: -50px 0 0 0;

position: fixed;

text-align: center;

top: 50%;

width: 100%;

z-index: 100;

}

.rainbow {

position: fixed;

height: 50px;

width: 100%;

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1MWQzOSIvPjxzdG9wIG9mZnNldD0iMTYuNjY2NjclIiBzdG9wLWNvbG9yPSIjZTUxZDM5Ii8+PHN0b3Agb2Zmc2V0PSIxNi42NjY2NyUiIHN0b3AtY29sb3I9IiNmNThmMjMiLz48c3RvcCBvZmZzZXQ9IjMzLjMzMzMzJSIgc3RvcC1jb2xvcj0iI2Y1OGYyMyIvPjxzdG9wIG9mZnNldD0iMzMuMzMzMzMlIiBzdG9wLWNvbG9yPSIjZjRlYzI1Ii8+PHN0b3Agb2Zmc2V0PSI1MC4wJSIgc3RvcC1jb2xvcj0iI2Y0ZWMyNSIvPjxzdG9wIG9mZnNldD0iNTAuMCUiIHN0b3AtY29sb3I9IiM1N2FkNDgiLz48c3RvcCBvZmZzZXQ9IjY2LjY2NjY3JSIgc3RvcC1jb2xvcj0iIzU3YWQ0OCIvPjxzdG9wIG9mZnNldD0iNjYuNjY2NjclIiBzdG9wLWNvbG9yPSIjMWM2MWFlIi8+PHN0b3Agb2Zmc2V0PSI4My4zMzMzMyUiIHN0b3AtY29sb3I9IiMxYzYxYWUiLz48c3RvcCBvZmZzZXQ9IjgzLjMzMzMzJSIgc3RvcC1jb2xvcj0iIzViNDM5YiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');

background-size: 100%;

background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #e51d39), color-stop(16.66667%, #e51d39), color-stop(16.66667%, #f58f23), color-stop(33.33333%, #f58f23), color-stop(33.33333%, #f4ec25), color-stop(50%, #f4ec25), color-stop(50%, #57ad48), color-stop(66.66667%, #57ad48), color-stop(66.66667%, #1c61ae), color-stop(83.33333%, #1c61ae), color-stop(83.33333%, #5b439b));

background-image: -moz-linear-gradient(left, #e51d39, #e51d39 16.66667%, #f58f23 16.66667%, #f58f23 33.33333%, #f4ec25 33.33333%, #f4ec25 50%, #57ad48 50%, #57ad48 66.66667%, #1c61ae 66.66667%, #1c61ae 83.33333%, #5b439b 83.33333%);

background-image: -webkit-linear-gradient(left, #e51d39, #e51d39 16.66667%, #f58f23 16.66667%, #f58f23 33.33333%, #f4ec25 33.33333%, #f4ec25 50%, #57ad48 50%, #57ad48 66.66667%, #1c61ae 66.66667%, #1c61ae 83.33333%, #5b439b 83.33333%);

background-image: linear-gradient(to right, #e51d39, #e51d39 16.66667%, #f58f23 16.66667%, #f58f23 33.33333%, #f4ec25 33.33333%, #f4ec25 50%, #57ad48 50%, #57ad48 66.66667%, #1c61ae 66.66667%, #1c61ae 83.33333%, #5b439b 83.33333%);

}

.rainbow.bottom {

bottom: 0;

}

.rainbow.top {

top: 0;

}

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

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

相关文章

奎享添加自己字体_奎享雕刻软件写字操作简要说明

关于奎享雕刻软件单线字书写操作步骤的简要说明特别提醒!设备完全调试好以后再练习写字,调试好的标志是用微雕管家刀路雕刻界面能顺利画出一张........&#…

mysql load data infile 导入数据 某一列 空_Sql数据挑战赛amp;网络销售案例分析

SQL挑战赛第一期:1: 编写一个查询&#xff0c;列出员工姓名列表&#xff0c;员工每月工资超过2000美元且员工工作时间少于10个月。通过提升employee_id对结果进行排序select name from employee where salary > 2000 and months < 10 order by employee_id;2: 查询 Emplo…

哪个html标签用于定义文档的标题,在HTML中,(41)用于定义文档的标题。

Packet switching is a method of slicing __(71)__ messages into parcels called “packets,” sending the packets along different communication __(72)__ as they become available, and then reassembling the packets __(73)__they arrive at their destination. Prio…

stm32的afio初始化代码_STM32-IO-AFIO(复用功能IO和调试配置)

最近在学习STM32&#xff0c;在BZ上一篇关于的串口通信文章里有这么一段代码&#xff1a;RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOD| RCC_APB2Periph_AFIO,ENABLE);当初是参考开发的里子写的一直对GPIOD或上“RCC_APB2Periph_AFIO”这句话的意思没搞懂&#xff0c;通过这几…

js获取dom html元素属性,JS如何通过元素的CLASS属性得到对应的DOM对象?

非IE6,7,8可以直接用自带的属性 getElementsByClassName,如果需要考虑兼容&#xff0c;就需要自己写了。下面是自己写的&#xff1a;function getClassName(obj,sName) //-->obj是要获取元素的父级{ //-->sName是class名字if(document.getElementsByClassName){return ob…

feign调用多个服务_spring cloud各个微服务之间如何相互调用(Feign、Feign带token访问服务接口)...

1、首先先看什么是Feign。2、若其他服务的接口未做权限处理&#xff0c;参照上文第1点的博文即可。3、若其他服务的接口做了权限的处理(例如OAuth 2)时该如何访问?a、有做权限处理的服务接口直接调用会造成调用时出现http 401未授权的错误&#xff0c;继而导致最终服务的http …

html项目列表页面源码,HTML 列表

HTML 列表HTML 支持有序、无序和定义列表:HTML 列表有序列表第一个列表项第二个列表项第三个列表项无序列表列表项列表项列表项在线实例无序列表本例演示无序列表。有序列表本例演示有序列表。(可以在本页底端找到更多实例。)HTML无序列表无序列表是一个项目的列表&#xff0c;…

vue 实现数据滚动显示_vue实现动态添加数据滚动条自动滚动到底部的示例代码...

在使用vue实现聊天页面的时候&#xff0c;聊天数据动态加到页面中&#xff0c;需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll但是安装后发现是用不了的&#xff0c;报错信息如下&#xff1a;VM14383:27 [Vue warn]: Failed to resolve directive: c…

linux关机方法有哪些?有何区别_Linux关机命令大全:Linux各关机命令之间的区别和用法...

Linux怎么用命令来进行关机/重启呢&#xff1f;Linux是一套免费使用和自由传播的类Unix操作系统&#xff0c;想使用Linux系统的关机命令必须要拿到root权限&#xff0c;下面给大家介绍一些Linux常用的关机命令以及各关机命令之间的区别和用法。Linux系统下常用的一些关机命令&a…

html5 canvas裁剪图片,html5-canvas 使用画布裁剪图像

示例本示例显示了一个简单的图像裁剪功能&#xff0c;该功能获取图像和裁剪坐标并返回裁剪后的图像。function cropImage(image, croppingCoords) {var cc croppingCoords;var workCan document.createElement("canvas"); // 创建一个画布workCan.width Math.floor…

html用转义字符画菱形,JavaScript生成字符画(ASCII Art)

今天玩一些新的东西&#xff0c;大家都没有看过这样的视频&#xff1a;或者 这样的图片&#xff1a;网上有很多生成这种图片/视频的工具&#xff0c;但是每个程序员都有一颗造轮子的心&#xff0c;我们当然要玩出自己的花样啦。老规矩&#xff0c;还是先讲原理&#xff0c;建议…

大数据职业理解_大数据带给我们职业三大根本改变

那么&#xff0c;大数据为什么成为所有人关注的焦点?大数据带来了什么样的本质性改变?为此&#xff0c;我们与中国计算机学会大数据学术带头人、中国人民大学信息学院院长杜小勇教授进行了访谈。大数据(Big data)通常用来形容数字化时代下创造出的大量非结构化和半结构化数据…

微信更新对html影响,微信再次大更新 将极大影响用户使用习惯

[导读]微信再次迎来历史性大更新&#xff0c;小程序终于展露腾讯野心&#xff01;微信再次迎来历史性大更新&#xff0c;小程序终于展露腾讯野心!...微信小程序桌面在昨日1月22日晚&#xff0c;微信更新7.0.3版本&#xff0c;腾讯在App Store中只表示&#xff1a;本次是一次小更…

什么叫pmt测试分析_RVS — 面向目标硬件的软件性能测试工具

Rapita Verification Suite(简称&#xff1a;RVS)&#xff0c;为英国Rapita Systems公司提供的一款嵌入式系统在板测试套件。其产品符合ISO-26262、IEC-61508等行业标准&#xff0c;兼容Vxworks、Linux、SYSBIOS 等操作系统&#xff0c;支持C、C、Ada多种语言&#xff0c;多方位…

matlab2019b 深度学习_Matlab 2019b 数据标注问题、工具与自动标注

从影像中自动提取目标&#xff0c;并进行稳定跟踪&#xff0c;是自动驾驶感知系统的重要目标。本技术博文&#xff0c;介绍了基于卷积神经网络技术(CNN)的图像目标识别的全过程&#xff0c;包括&#xff1a;l FasterCNN中影响标注的数据格式l imageLabeler的结果&#xff0c;非…

帕斯卡三角形html,04_帕斯卡三角形

# 用时0msclass Solution(object):def generate(self, numRows):""":type numRows: int:rtype: List[List[int]]"""# 第 n 行要用到 n-1 行的数据&#xff0c;应该是个动态规划吧# n [1 n-1[0]n-1[1] .... n-1[n-2]n-1[n-1]]if numRows 0:retu…

版本不见了_王者荣耀复古版本来袭?第四代主宰形象回归!可以给小兵加速

山河不足重&#xff0c;重在遇知已。好久不见&#xff0c;别来无恙来自小助理的文章推送~时值中秋&#xff0c;先祝大家中秋节快乐&#xff01;王者荣耀的新版本即将上线&#xff0c;不知道大家还记不记得新版本将会上线很多新的东西&#xff0c;峡谷路线更改&#xff0c;鼓励同…

jxl读取html格式excel,基于Java+Selenium的WebUI自动化测试框架(十)-----读取Excel文件(JXL)...

packagewebui.xUtils;importjava.io.File;importorg.testng.Reporter;importjxl.Cell;importjxl.Sheet;importjxl.Workbook;public classExcelReadJXL {/***jxl读取Excel*指定文档路径及名称* 指定开始及结束行&#xff0c;开始及结束列*paramsheet_name 为sheet工作表名称&…

sqlserver垮库查询_SQLServer跨库查询--分布式查询

--用openrowset连接远程SQL或插入数据--如果只是临时访问,可以直接用openrowset--查询示例select * from openrowset(SQLOLEDB,sql服务器名;用户名;密码,数据库名.dbo.表名)在跨库查询时需要启用Ad Hoc Distributed Queries启用Ad Hoc Distributed Queries&#xff1a;exec sp_…

360产品演示代码 css3 html5,HTML5 CSS3代码的三维展示

CSS语言&#xff1a;CSSSCSS确定body {background-color: #ececec;}pre {white-space: pre-wrap;}#perspective {position: relative;width: 560px;height: 446px;margin: 80px auto 0;z-index: 1;user-select: none;cursor: default;transform-style: preserve-3d;}#perspecti…