css斜条纹背景——linear-gradient
话不多说,上图为敬
代码贴上(html代码就一个container,没写的)
body{background: #243960;
}
.container{margin: 200px auto;width: 500px;height: 500px;background: linear-gradient(45deg, rgba(0, 153, 68, .5) 0, rgba(0, 153, 68, .5) 25%, transparent 25%, transparent 50%, rgba(0, 153, 68, .5) 50%, rgba(0, 153, 68, .5) 75%, transparent 75%, transparent);background-size: 50px 50px;
}
接下来一个一个解析:
margin, width, height 这块自己随意定义,关键属性有两个——background中的linear-gradient 和 background-size。
先来linear-gradient,分析其属性,总共有9个属性
45deg外加8个后接百分比的颜色值。
45deg表示条纹倾斜角度,这个好理解。如果不加这个属性,就成了横条纹了,以此90deg就是竖条纹,可以组成花格条纹。
分析后面8个属性,总结出是由一个rgba颜色值和transparent外加百分比组成。
rgba颜色值是条纹的颜色,transparent其实也是颜色,不过是继承自父级的,而这里的父级颜色就是body的背景色(在这块代码里可以理解为无色透明≈rgba(0,0,0,0))。
而百分比也比较好理解,不过需要串起来读:
0-25% 是 条纹色
25%-50% 是 父级颜色
50%-75% 是 条纹色
75%-100% 是 父级颜色
这里的细节最后一个transparent后没接百分比其实是表示transparent 1,也就是100%了。注:如果没有写角度属性,渲染是从top开始的,如果写的是0deg是从bottom开始的,角度值增加多少,则渲染开始点顺时针旋转多少。
接下来讲道理了,按照这个逻辑,那我们渲染的图片应该是这个样的
怎么成了第一张图的模样了?其实关键点是在后面一个属性background-size,以及默认值为repeat的background-repeat。
使用background-size: 50px 50px;就把上图的样式缩小到了50*50的方格子中。然后这样是无法铺满500*500的容器,另外background-repeat的默认repeat发挥作用,把渲染好的50*50方格子平铺重复渲染到500*500的容器里面。就做成了第一张图的效果。
了解到每个属性的作用,拓展起来就方便多了,如果要改变斜条纹线条的大小,只需要改变background-size的大小就行了。颜色也不一定要用rgba格式,另外如果要做双色条纹也只需要把transparent改成另外一个颜色就ok。三色条纹也简单
50% ÷ 3 ≈ 16.66%
所以代码是:
.container{margin: 200px auto;width: 500px;height: 500px;background: linear-gradient(45deg, red 0, red 16.66%, #fff000 16.66%, #fff000 33.33%, rgb(0, 0, 255) 33.33%, rgb(0, 0, 255) 50%,red 50%, red 66.66%, #fff000 66.66%, #fff000 83.33%, rgb(0, 0, 255) 83.33%, rgb(0, 0, 255));background-size: 50px 50px;
}
效果太辣眼睛就不贴了。
关于斜条纹就暂时到这里了,如果后期有更好玩的会持续更新
css斜条纹背景——linear-gradient相关推荐
- css如何实现菱形背景图片,使用CSS 实现菱形图片,斜条纹背景
比较简单的菱形图片: 效果如下 代码部分: .d1{ margin-left: 100px; display: inline-block; transform: rotate(45deg); over ...
- html如何把图片在背景图一半,img只显示图片一部分 或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- html背景透明图片不透明,css中背景透明的图片不透明怎么解决
css中背景透明的图片不透明怎么解决 一.使用滤镜解决img { background: transparent; -ms-filter: "progid:DXImageTransform. ...
- css 文字背景波浪,背景水波浪,动态波浪效果
css 文字背景波浪,背景水波浪,动态波浪效果 <!DOCTYPE html> <html lang="en"> <head><meta ...
- 纯CSS实现背景渐变、球和阶梯的跳动
纯CSS实现背景渐变.球和阶梯的跳动 作者:马光佳 撰写时间:2019.1.17 开发工具与关键技术:MicrossftVisualStudio.animation与@keyframes的配合使用 背 ...
- html+页面的背景透明,css设置背景透明 元素不透明
css设置背景透明 元素不透明 在做前端页面的时候,我们会遇到这样的情况,需要背景为半透明状态,但是层里面的内容不需要为透明的状态.有时候我们设置的时候会出现不管内容还是背景同时都成透明了,如何实现背 ...
- 纯css实现背景颜色渐变动画
纯css实现背景颜色渐变动画,代码及效果图如下. body {width: 100wh;height: 100vh;color: #fff;background: linear-gradient(-4 ...
- html怎样调节背景透明度,css设置背景透明度的方法是什么
css设置背景透明度的方法是什么 发布时间:2020-09-01 15:43:28 来源:亿速云 阅读:83 作者:小新 这篇文章将为大家详细讲解有关css设置背景透明度的方法是什么,小编觉得挺实用的 ...
- 开源超美css动态背景 可直接引入html文件使用 含注释、可更改
开源超美css动态背景 可直接引入html文件使用 含注释.可更改 1.背景样式 本背景为动态蜘蛛网背景. 上图: 2.如何在html里面引用,作为html背景 1文件目录 放在同一目录下 2 在in ...
最新文章
- Python3--爬取数据之911网站信息爬取
- PowerShell脚本遇到的问题汇总
- how to export many stock data from Wind terminal
- 科研福利!北京超算获AI Perf500总量份额第一,200元卡时免费领取
- Skype for Business Server前端高可用原理分析
- 协程问题:Can only use Waiter.switch method from the Hub greenlet
- Ubuntu环境下挂载新硬盘
- matlab 分类学习工具箱 Classification Learner的使用及导出其生成的图,混淆矩阵confusion matrix的画法
- 电商浪潮过后,无人零售会引领新零售的爆发吗
- AI画作拿下比赛一等奖惹怒人类艺术家,主办方:照常颁奖
- android 各类demo链接
- yum linux gcc安装包下载,linux下安装yum及gcc
- javascript中的正则表达式语法
- 玩转Ubuntu操作系统(一)Ubuntu的安装
- DiscuzX3.1数据库字典(含之前)
- 感悟西游记——成气候的妖精都是领导家的
- 社区团购讲堂之精耕细作的互联网下半场,社区团购将改变实体商超格局?
- 曼珠沙华——三途河畔的接引之花(一)
- iOS开发 导航栏渐变 图片下拉放大 导航栏移动 仿QQ 微博 知乎导航栏
- Corel Painter 15在Surface Pro 4下开启笔触压力感应
热门文章
- linux fastQC 操作命令,Linux shell合并fastq测序数据/批量fastqc小脚本|merge|multiqc
- java-net-php-python-SSM的美工接单系统计算机毕业设计程序
- 畅阳题库管理系统-在线考试(h5+小程序)Java开源版本
- 第一讲:双活容灾技术和方案概述
- 数学基础 - 第十八章 平行四边形
- python 合并内容相同单元格
- 三维激光测距之三角法测距
- b站视频详情数据抓取,自动打包并发送到指定邮箱(单个或者群发)
- Ubuntu18.04 因断电开机报错:utmp处卡死
- 随手记 web服务器