CSS线性渐变拼接，一个完整的渐变容器(div),要拆分成多个渐变容器(div)，并且保持渐变效果一致

最新推荐文章于 2024-09-10 22:58:41 发布
最新推荐文章于 2024-09-10 22:58:41 发布
阅读量1.2k 收藏 13
点赞数 17
分类专栏： css vue 文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56624286/article/details/141725025
版权
vue 同时被 2 个专栏收录
53 篇文章 0 订阅
订阅专栏
css
13 篇文章 0 订阅
订阅专栏

1 需求

一个有渐变背景的div，需要替换成多个渐变背景div拼接，渐变效果需要保持一致（不通过一个大的div渐变，其他子的div绝对定位其上并且背景透明来解决）

2 分析

主要工作：

  1. 计算完整div背景线性渐变时的渐变开始线和结束线（假设中心点为几何中心）
  2. 计算各个独立div背景线性渐变时的渐变开始线和结束线（假设中心点为几何中心）
  3. 重新计算各个子div的渐变开始线和结束线(百分比)

3 实现

3.1 水平拼接

在这里插入图片描述

解释：

  • 黑色虚线为各个子div的水平和垂直中心线
  • 红色虚线为整个div的水平和垂直中心线
  • 绿色虚线为渐变方向上的中心线，和黑色虚线的夹角为各个子div的渐变角
  • 紫色虚线为渐变方向上的中心线，和红色虚线的夹角为整个div的渐变角
  • 蓝色虚线为渐变开始线和结束线，垂直于渐变方向上的中心线
  • 蓝色圆为各个子div独立渐变时的渐变起始中心点，绿色圆为各个子div独立渐变时的渐变结束中心点
  • 紫色圆为整个div的渐变起始中心点，红色圆为整个div的渐变结束中心点
  • 蓝色紫色双圆为当前子div独立渐变时和其作为整个div整体渐变的一部分时的共同渐变起始中心点，是重合的
  • 绿色红色双圆为当前子div独立渐变时和其作为整个div整体渐变的一部分时的共同渐变结束中心点，是重合的
  • 蓝色实线段为整个渐变路径，其长度为渐变长度，也就是颜色值后面的参数0-100%
  • 绿色实线段为为了作为整体渐变一部分而需要增加的渐变路径
<template>
  <div class="container gradient"></div>
  <div class="container">
    <div
      class="container-column"
      v-for="(col, index) in itemList"
      :key="index"
      :style="{
        width: col.width + 'px',
        height: col.height + 'px',
        background: getGradient(col, index)
      }"
    ></div>
  </div>
</template>

<script setup lang="ts">
const itemList = ref([
  {
    width: 100,
    height: 400
  },
  {
    width: 200,
    height: 400
  },
  {
    width: 300,
    height: 400
  }
]);
const angle = ref(45);

const getGradient = (item, index) => {
  const beforeWidth = itemList.value.slice(0, index).reduce((a, b) => a + b.width, 0);
  const afterWidth = itemList.value.slice(index + 1).reduce((a, b) => a + b.width, 0);
  const startPosition = `calc(100% - (${beforeWidth} * sin(${angle.value}deg) / (2 * (${item.width / 2} * tan(${angle.value}deg) + ${item.height / 2}) * cos(${angle.value}deg)) + 1) * 100%)`;
  const endPosition = `calc((${afterWidth} * sin(${angle.value}deg) / (2 * (${item.width / 2} * tan(${angle.value}deg) + ${item.height / 2}) * cos(${angle.value}deg)) + 1) * 100%)`;
  const ret = `linear-gradient(${angle.value}deg,
        red ${startPosition},
        blue ${endPosition}
      )`;
  return ret;
};
</script>
<style scoped lang="scss">
.container {
  width: 600px;
  height: 400px;
  display: inline-block;

  .container-column {
    display: inline-block;
  }
}
.gradient {
  background: linear-gradient(45deg, red 0%, blue 100%);
}
</style>

效果：

在这里插入图片描述

加上边框更清晰点：

在这里插入图片描述

3.2 垂直拼接

在这里插入图片描述

解释：

  • 黑色虚线为各个子div的水平和垂直中心线
  • 红色虚线为整个div的水平和垂直中心线
  • 绿色虚线为渐变方向上的中心线，和黑色虚线的夹角为各个子div的渐变角
  • 紫色虚线为渐变方向上的中心线，和红色虚线的夹角为整个div的渐变角
  • 蓝色虚线为渐变开始线和结束线，垂直于渐变方向上的中心线
  • 蓝色圆为各个子div独立渐变时的渐变起始中心点，绿色圆为各个子div独立渐变时的渐变结束中心点
  • 紫色圆为整个div的渐变起始中心点，红色圆为整个div的渐变结束中心点
  • 蓝色紫色双圆为当前子div独立渐变时和其作为整个div整体渐变的一部分时的共同渐变起始中心点，是重合的
  • 绿色红色双圆为当前子div独立渐变时和其作为整个div整体渐变的一部分时的共同渐变结束中心点，是重合的
  • 蓝色实线段为整个渐变路径，其长度为渐变长度，也就是颜色值后面的参数0-100%
  • 绿色实线段为为了作为整体渐变一部分而需要增加的渐变路径
<template>
  <div class="container gradient"></div>
  <div class="container">
    <div
      class="container-column"
      v-for="(col, index) in itemList"
      :key="index"
      :style="{
        width: col.width + 'px',
        height: col.height + 'px',
        background: getGradient(col, index)
      }"
    ></div>
  </div>
</template>

<script setup lang="ts">
const itemList = ref([
  {
    width: 400,
    height: 100
  },
  {
    width: 400,
    height: 200
  },
  {
    width: 400,
    height: 300
  },
  {
    width: 400,
    height: 300
  }
]);
const angle = ref(45);

const getGradient = (item, index) => {
  const afterHeight = itemList.value.slice(0, index).reduce((a, b) => a + b.height, 0);
  const beforeHeight = itemList.value.slice(index + 1).reduce((a, b) => a + b.height, 0);
  const startPosition = `calc(100% - (${beforeHeight} * cos(${angle.value}deg) / (2 * (${item.width / 2} * tan(${angle.value}deg) + ${item.height / 2}) * cos(${angle.value}deg)) + 1) * 100%)`;
  const endPosition = `calc((${afterHeight} * cos(${angle.value}deg) / (2 * (${item.width / 2} * tan(${angle.value}deg) + ${item.height / 2}) * cos(${angle.value}deg)) + 1) * 100%)`;
  const ret = `linear-gradient(${angle.value}deg,
        red ${startPosition},
        blue ${endPosition}
      )`;
  return ret;
};
</script>
<style scoped lang="scss">
.container {
  width: 400px;
  height: 900px;
  display: inline-block;
  & + .container {
    margin-left: 10px;
  }
  line-height: 0;
  .container-column {
    display: inline-block;
  }
}
.gradient {
  background: linear-gradient(45deg, red 0%, blue 100%);
}
</style>

</style>

效果：

在这里插入图片描述

加上边框更清晰点：

在这里插入图片描述

3.3 矩阵拼接

在这里插入图片描述

图上画线太多，下图画个稍微简明点的

在这里插入图片描述

解释：

  • 黑色虚线为各个子div的水平和垂直中心线
  • 红色虚线为整个div的水平和垂直中心线
  • 绿色虚线为渐变方向上的中心线，和黑色虚线的夹角为各个子div的渐变角
  • 紫色虚线为渐变方向上的中心线，和红色虚线的夹角为整个div的渐变角
  • 蓝色虚线为渐变开始线和结束线，垂直于渐变方向上的中心线
  • 蓝色圆为各个子div独立渐变时的渐变起始中心点，绿色圆为各个子div独立渐变时的渐变结束中心点
  • 紫色圆为整个div的渐变起始中心点，红色圆为整个div的渐变结束中心点
  • 蓝色紫色双圆为当前子div独立渐变时和其作为整个div整体渐变的一部分时的共同渐变起始中心点，是重合的
  • 绿色红色双圆为当前子div独立渐变时和其作为整个div整体渐变的一部分时的共同渐变结束中心点，是重合的
  • 蓝色实线段为整个渐变路径，其长度为渐变长度，也就是颜色值后面的参数0-100%
  • 绿色实线段为为了作为整体渐变一部分而需要增加的渐变路径
<template>
  <div class="container gradient"></div>
  <div class="container">
    <div class="container-row" v-for="(row, rowIndex) in itemList" :key="rowIndex">
      <div
        class="container-column"
        v-for="(col, colIndex) in row"
        :key="colIndex"
        :style="{
          width: col.width + 'px',
          height: col.height + 'px',
          background: getGradient(col, colIndex, rowIndex)
        }"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
const itemList = ref([
  [
    {
      width: 100,
      height: 100
    },
    {
      width: 300,
      height: 100
    }
  ],
  [
    {
      width: 200,
      height: 200
    },
    {
      width: 100,
      height: 200
    },
    {
      width: 100,
      height: 200
    }
  ],
  [
    {
      width: 100,
      height: 300
    },
    {
      width: 100,
      height: 300
    },
    {
      width: 100,
      height: 300
    },
    {
      width: 100,
      height: 300
    }
  ],
  [
    {
      width: 400,
      height: 300
    }
  ]
]);
const angle = ref(45);

const getGradient = (item, colIndex, rowIndex) => {
  const afterHeight = itemList.value.slice(0, rowIndex).reduce((a, b) => a + b[0].height, 0);
  const beforeHeight = itemList.value.slice(rowIndex + 1).reduce((a, b) => a + b[0].height, 0);
  const beforeWidth = itemList.value[rowIndex].slice(0, colIndex).reduce((a, b) => a + b.width, 0);
  const afterWidth = itemList.value[rowIndex].slice(colIndex + 1).reduce((a, b) => a + b.width, 0);
  const startPosition = `calc(100% - ((${beforeHeight} * cos(${angle.value}deg) + ${beforeWidth} * sin(${angle.value}deg))/ (2 * (${item.width / 2} * tan(${angle.value}deg) + ${item.height / 2}) * cos(${angle.value}deg)) + 1) * 100%)`;
  const endPosition = `calc(((${afterHeight} * cos(${angle.value}deg) + ${afterWidth} * sin(${angle.value}deg)) / (2 * (${item.width / 2} * tan(${angle.value}deg) + ${item.height / 2}) * cos(${angle.value}deg)) + 1) * 100%)`;
  const ret = `linear-gradient(${angle.value}deg,
        red ${startPosition},
        blue ${endPosition}
      )`;
  return ret;
};
</script>
<style scoped lang="scss">
.container {
  width: 400px;
  height: 900px;
  display: inline-block;
  & + .container {
    margin-left: 10px;
  }
  .container-row {
    line-height: 0;
    .container-column {
      display: inline-block;
    }
  }
}
.gradient {
  background: linear-gradient(45deg, red 0%, blue 100%);
}
</style>

效果：

在这里插入图片描述

加上边框更清晰点：

在这里插入图片描述

4 最后

还可以有更复杂的情况：

  • 矩阵中的跨行跨列，大家可自行探索（其实投篮的办法是可以把跨行跨列的单元再进行拆分，使得所有单元都不出现跨行跨列，那么上面第三种矩阵拼接就可以使用了）
  • 多个颜色（中间的颜色需要根据当前百分比位置和增加的距离得到最终的百分比位置）
  • 非线性渐变的情况（感觉稍微有点复杂）
html设计渐变背景,HTML网页设计之div渐变背景色
weixin_42528780的博客
06-28 6492
最近学到div背景渐变色，碰到一些小的点，这里收藏一下。写到渐变色之前，这里先在平时不注意的地方留一爪。(1)使body填充整个空间，而不是默认值：这里需要在css文件的最开头写一句：* {margin:0;padding:0}(2)去除table表中th之间会默认的留白：在table属性中，添加border-collapse：collapse(3)默认input type="submit" 的按...
数据可视化(ECharts)
weixin_45756606的博客
06-29 1438
​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。​ 该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 …完成该项目需要具备以下知识：粗略代码统计：大白话：官方教程：五分钟上手ECharts自己步骤： 初始化echarts实例对象 指定配置项和数
css 多重背景渐变和元素翻转
m0_56168677的博客
02-22 246
css 多重渐变和翻转 linear-gradient transform: rotateY(180deg)
如何利用 CSS 渐变实现多样化背景效果
最新发布
weixin_63625059的博客
09-10 1441
总在平常看到像这样的图片 背景是如何实现的呢 背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果，通过调整渐变类型和设置，你可以轻松实现从简单到复杂的各种背景效果。在日常开发中 有很多需要用到渐变的地方，这片文章来总结一下来看MDN是如何说的CSS 渐变由 [] 数据类型表示，它是 [] 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。
CSS制作多层重叠渐变
懒羊的技术窝[anchor]
10-05 2920
2007年发表于IT168  链接地址：http://publish.it168.com/2007/0531/20070531037301.shtml笔者根据效果图大致模拟了一张两层渐变的重叠效果图，如下： 图1     图一采用两
css多重颜色渐变,CSS多重渐变颜色停止
weixin_39542093的博客
08-03 457
是的，你可以。 一个简单的例子(不完全是你的colourset，但它显示了计划)：background: #b8e1fc; /* Old browsers */background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2da...
css文字特效-渐变叠加
weixin_41756610的博客
11-02 1808
&lt;div class="text"&gt; 文字特效 &lt;/div&gt; .text{ background:linear-gradient(40deg,rgba(54, 109, 250, 1)0%,rgba(204, 59, 251, 1)100%); -webkit-background-clip:text; -webkit-text-fi...
HTML5、CSS、JS基础
qq_49101841的博客
03-03 2375
学习笔记
史上最全最新前端面试题（不定期更新，有问题欢迎评论区对线）
lb_nizhanban的博客
06-13 2355
一阶段面试题： CSS浮动怎么理解的 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，也就是脱离文档流，所以文档的普通流中的块框表现得就像浮动框不存在一样。一般使用float来实现浮动，联系=》清除浮动的相关方法。27题 绝对定位相对定位怎么理解 absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据根元素
echarts视频观后笔记
m0_51221102的博客
03-16 255
ECHARTS 一、常用图表 1. 柱状图 5分钟上手ECharts 步骤1:引入echarts.js文件 步骤2:准备一个呈现图表的盒子 步骤3:初始化echarts实例对象 步骤4:准备配置项 步骤5:将配置项设置给echarts实例对象 <!-- 1.引入 --> <script src="./lib/echarts.common.js"></script> <body> <!-- 2.存放图表的盒子 --> &lt
前端非框架类知识点汇总
weixin_46044936的博客
07-26 2544
html单词库 <link rel="stylesheet" href="css文件路径">css引入 <iframe src="danghang.html" width="100%" height="310px" frameborder="0"></iframe> 图片标签： img src="" title="" alt="" src属性 是指图像文件路径 alt属性 是在图片加载不出来时替换成文本 title属性 是在鼠标悬停的时候显示 srcset属性 是在不
div背景颜色怎样渐变 css实现div层背景颜色渐变代码
09-25
CSS控制DIV层背景颜色渐变是一个相当不错的效果，看起来很夺目的，本文也尝试着实现一个类似这样的效果，感兴趣的朋友可不要错过了啊，或许本文所提供的对你学习css有所帮，好了话不多说切入正题
css教程实现div背景色渐变色代码分享
12-13
效果图： 复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=””><head>
css实现背景渐变叠加
想好了再写！
03-01 893
【代码】css实现背景渐变叠加。
CSS渐变
weixin_64037609的博客
09-05 127
css渐变案例练习效果
使用css3渐变实现多个内圆角
weixin_40393909的博客
07-05 1073
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;div class="iner"&gt;&lt;/div&gt; &lt;style type="text/css"&gt; .iner{ width: 200px; height: 200px; background: radial-gradient
html背景叠加渐变,使CSS3 用after元素给图片叠加渐变背景效果
weixin_32549035的博客
06-10 460
CSS语言：CSSSCSS确定body {text-align: center;padding: 0 2em;font-family: 'Open Sans', 'San Francisco', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;overflow-x: hidden;}figure {display: block;width: 5...
设置div渐变色
桃园狂刀
04-09 5921
样式 .linear { width: 100%; height: 600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#b8c4cb, endColorStr=red); /*IE 6 7 8*/ background: -ms-l...
div背景颜色渐变
qq_42325246的博客
05-30 2628
div背景颜色怎样渐变 css实现div层背景颜色渐变代码葬魂军团o蚴 | 浏览 14062 次 |举报我有更好的答案2017-01-15最佳答案CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向与径向渐变（Radial Grad...
使用JS+CSS+DIV创建文字颜色渐变效果
- 可能会创建一个或多个`<span>`元素，每个元素代表输入文字的一部分，然后分别设置它们的颜色，通过时间间隔改变颜色值，以达到渐变效果。 实现文字颜色渐变的方法有很多，这里提到的可能涉及到JavaScript动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值