html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享
通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就了解CSS制作Web页面条纹背景样式的技巧分享,需要的朋友可以参考下
一、横向条纹如下代码:background: linear-gradient(#fb3 20%, #58a 80%)
上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色。如果让中间的部分逐渐缩小,当中间部分变为0即上下两种颜色的七点和终点相同是,就没有了渐变而变成了两种颜色的色条:background: linear-gradient(#fb3 50%, #58a 50%);
接下来可以通过设置背景的大小,让背景高度变小并且背景默认为repeat,从而出现条纹状background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
我们可以不设定第二个颜色的起始位置,设置为0,则浏览器默认为接着上一个颜色开始:background: linear-gradient(#fb3 30%, #58a 0);
background-size:100% 30px;
这样就形成了一个黄色占30%蓝色占70%的条纹状背景
也可以设置多种颜色,下面设置了三种颜色的条纹:background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);
background-size: 100% 45px;
二、竖向条纹只需要在linear-gradient方法中加一个前缀即可。注意还需颠倒background-size长宽的设定background: linear-gradient(to rightright, #fb3 50%, #58a 0);
background-size:30px 100%;
三、斜向条纹可以通过修改background-size的值以及为linear-gradient添加角度来实现斜向的条纹:
background: linear-gradient(45deg, #fb3 50%, #58a 0); //让背景的渐变带有倾斜
background-size:30px 30px; //每一块小组成部分固定宽度和高度
但这样做的结果是只会形成一小块一小块的斜线,而不是整体p的斜线,我们需要以四个小p为一组绘制斜线,添加linear-gradient中的颜色分解:background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);
background-size:30px 30px;
四、使用repeat-linear-gradient对于斜线的背景绘制,使用repeat-linear-gradient方法更有效。使用该方法的时候,设置的颜色变化会自动进行重复直到铺满整个p。实例代码如下:background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
通过这种方式可以任意更改角度,而不会出现上中方法中的调节困难
background: repeating-linear-gradient(60deg, #fb3, #fb315px, #58a 0, #58a 30px);
(这种方法其实相当于将size的控制和gradient的控制合到了一起)
五、关于颜色的设定有时我们希望条纹背景的颜色之间是相近的颜色,但是如果手动设定这个颜色的#很不方便,也很难发现要选择什么样的颜色。可以使用如下方法:background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1)15px,
transparent 0,transparent 30px);
这种方法的原理是:指定背景中最深的颜色,条文中其他相近色用透明度进行调整
六、综合实例这里效果图一起放上来了,与下面的样式一一对应:
.stripes {
height: 250px;
width: 375px;
float: left;
margin: 10px;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px; /* 控制条纹的大小 */
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;
}.horizontal {
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}.vertical {
background-color: #f90;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}.picnic {
background-color:white;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
-webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}.picnic {
background-color:white;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
-webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}.angled-135 {
background-color: #c16;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
}.checkered {
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(45deg, transparent 75%, #555 75%),
-o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #555 75%),
linear-gradient(-45deg, transparent 75%, #555 75%);
}
HTML代码:
html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享相关推荐
- html5横竖条纹背景,CSS制作Web页面条纹背景样式的介绍
这篇文章主要介绍了关于CSS制作Web页面条纹背景样式的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果 ...
- html中背景条纹效果,CSS揭秘之《条纹背景》
先来说说渐变吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果图如下所示:也就是说真正的渐变只出现在容器 60%(从20%到80%) 的高度区域 ...
- Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析
加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景 在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
- 如何把python可视化到前端_python数据可视化的效果如何在web页面中展示_北京可视化股票...
有什么APP可以展示可视化的任务进度 可视化任务进度软件,使用敬业签,具体可视有事项开始时间,进度及人.还有结束时间以及人员处理速等等,更多功能如下: 1.敬业签是一款功能比较全面的桌面便签软件,分为 ...
- ztree和php结合实例,实例详解jQuery EasyUI结合zTree树形结构制作web页面
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,z ...
- HTML+CSS 制作联系人页面(可自适应)
HTML+CSS 制作联系人页面 原视频链接 HTML: <!DOCTYPE html> <html lang="en"><head><m ...
- 【JavaScript】实现将从Excel中复制的数据粘贴到WEB页面Grid中
WEB项目中,我们有时会碰到这样的情况,需要将从Excel中复制的数据粘贴到WEB页面Grid中(当然复制的数据格式与Grid中数据显示格式是一致的),用JS实现起来并不难,重要的是如何准确得到从Ex ...
- html 仿word页面,HTML+CSS入门 HTML页面仿WORD样式详解
本篇教程介绍了HTML+CSS入门 HTML页面仿WORD样式详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 要求不再浏览器中添加office插件的前提下.展示WOR ...
- 用css去自定义页面滚动条的样式(谷歌浏览器,PC端)
用css去自定义页面滚动条的样式(谷歌浏览器,PC端) 常用的自定义滚动条样式,只需要用到三个属性 1.::-webkit-scrollbar 2.::-webkit-scrollbar-track ...
最新文章
- [ASP.NET MVC 小牛之路]10 - Controller 和 Action (2)
- web.xml 常用标签配置(转)
- Linux 爱好者的飞行棋:sudo
- 第二十五章补充内容 3 assert()宏
- PAT:1042. Shuffling Machine (20) AC
- 代码流程图生成器_【进阶Python】第五讲:迭代器与生成器
- ajax get请求成功,成功()函数的AJAX GET请求
- 基于SLS构建RDS审计合规监控
- 在maven引入一个maven仓库中不存在的jar,安装本地底仓库
- STM32F103:二.(6)mrc522卡号读取
- install torch for arm
- 5脚12v继电器接线图解_继电器线圈并联二极管的作用
- ARM体系结构与编程笔记
- 计算机指令与运算基础原理笔记
- php 触屏手写,MyTouch易维触摸屏手写输入法
- 算数,关系,逻辑运算
- 怎么选择靠谱的IP地理位置定位产品?
- html在一行内横向排列并排同行同时显示两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
- 米兔机器人 自由模式_成人床下也可以有玩具:MI 小米 米兔积木机器人 开箱体验...
- npm下载依赖时的问题