css：linear-gradient实现水平条纹背景，垂直条纹背景，斜向条纹背景

一、水平条纹效果：

<html>
<head>
<style type="text/css">
div
{
font-size:100px;
text-align:center;
line-height:3;
color:white;
background: linear-gradient(#fb3 50%,#58a 50%);
background-size:100% 100px;
}
</style>
</head>
<body>
<div>测试一下</div>
</body>
</html>

效果图：

二、垂直条纹效果：

<html>
<head>
<style type="text/css">
div
{
font-size:100px;
text-align:center;
line-height:3;
color:white;
background: linear-gradient(to right,#fb3 50%,#58a 50%);
background-size:100px 100% ;
}
</style>
</head>
<body>
<div>测试一下</div>
</body>
</html>

效果图：

三、斜向条纹背景：
尝试改写：

<html>
<head>
<style type="text/css">
div
{
font-size:100px;
text-align:center;
line-height:3;
color:white;
background: linear-gradient(45deg,#fb3 50%,#58a 50%);
background-size:100px 100px ;
}
</style>
</head>![在这里插入图片描述](https://img-blog.csdnimg.cn/20190814193954315.png)
<body>
<div>测试一下</div>
</body>
</html>

但是实际却并没有出现想要的效果：

翻转是把平铺图案的基本单位全部翻转了，无法实现无缝拼接。水平或者垂直的时候，基本单位都是两条贴片，但斜向是四条贴片，对比如下图所示：
水平2贴片：

斜向4贴片：

修改后代码如下：

<html>
<head>
<style type="text/css">
div
{
font-size:100px;
text-align:center;
line-height:3;
color:white;
background: linear-gradient(45deg,#fb3 25%,#58a 25%,#58a 50%,#fb3 50%,#fb3 75%,#58a 75%);
background-size:100px 100px ;
}
</style>
</head>
<body>
<div>测试一下</div>
</body>
</html>

效果如图所示：

但是实际条纹宽度由于翻转，值为宽度除以√2（45度，其余角度额外算），要想得到最接近的样子，相对应的size乘这个数值即可（只能是近似，css不支持根号，一般取整或者保留一位小数）。
或者使用repeating-linear-gradient（不用写background-size了，可实现任意角度，但是条纹宽度仍然会变细）也可以取到同样的效果，更推荐这一种方法，简单很多，也比较好理解）。

<html>
<head>
<style type="text/css">
div
{
font-size:100px;
text-align:center;
line-height:3;
color:white;
background: repeating-linear-gradient(45deg,#fb3,#fb3 50px,#58a 50px,#58a 100px);
}
</style>
</head>
<body>
<div>测试一下</div>
</body>
</html>

总之，不论角度是多少，创建双色条纹时都需要使用四个色标。

css：linear-gradient实现水平条纹背景，垂直条纹背景，斜向条纹背景相关推荐

css 画一条水平直线和垂直竖线
之前最初的水平横线,我们通常用的是<hr class='hori-line' /> 而如果我们不用怎么画呢?其实很简单,用div 去模拟, 给它合适的width 和 height,bor ...
【前端-CSS】盒子模型-水平方向、垂直方向的布局
框模型/ 盒模型/盒子模型水平布局元素在其父元素中的水平方向位置由margin-left.border-left.padding-left.width.padding-right.border-r ...
条纹背景，垂直条纹，斜向条纹，灵活的背景条纹
目录一:垂直条纹二:斜向条纹三:灵活的背景条纹一:垂直条纹垂直条纹的代码跟水平条纹几乎是一样的,差别在于:我们需要在开头加上一个额外的参数来指定渐变的方向.默认情况下是 to buttom ...
css使div元素水平并垂直的方法（4种）
这里以一个120x120的div块状物体做测试法1: position:absolute; left:0;top:0;right:0;bottom:0; margin:auto 法2: positi ...
CSS学习记录3.2/设置标签的背景颜色/控制背景图片的平铺方式/控制背景图片的位置/背景图片关联方式/背景图片和插入图片的区别/捕鱼达人背景练习/精灵图
设置标签的背景颜色: CSS中的background-color:属性,就是专门用来设置标签.bc+table 设置背景图片: CSS中的background-image: url( );的属性就是设 ...
HTML+CSS+JavaScript复习笔记持更（七）——CSS3常用属性之背景
背景设置 HTML页面中的背景是通过background设置的. 语法格式: <!DOCTYPE html> <html lang="en"> <he ...
opencv java水平投影_使用OpenCv中Mat进行水平投影与垂直投影并实现字符切分
由于要做图像的处理,所以最近在学习Opencv的相关知识,学习了Opencv中的Mat对象,查阅了网上的资料,了解了相关知识.现在实现了一个使用Mat对象来进行图像的水平投影与垂直投影,并在此基础之上 ...
Web学习第四天——CSS简介、选择器，常用（文本、字体、列表、背景、超链接）样式
Web学习第四天--CSS简介.选择器,常用(文本.字体.列表.背景.超链接)样式一.CSS简介 (一).什么是CSS? (二).CSS能够干什么? (三).CSS语法结构 (四).CSS的使用方式 ...
越区切换技术从层次网络上可以划分为水平切换和垂直切换,其中水平切换又可以分为硬切换、软切换、接力切换。
一.越区切换阐述当移动台从一个小区(指基站或者基站的覆盖范围)移动到另一个小区时,为了保持移动用户的不中断通信需要进行的信道切换称为越区切换. 越区切换技术从层次网络上可以划分为水平切换和垂直切换, ...

css：linear-gradient实现水平条纹背景，垂直条纹背景，斜向条纹背景

css：linear-gradient实现水平条纹背景，垂直条纹背景，斜向条纹背景相关推荐

最新文章

热门文章