时间戳

首页 > 解决方案 > 在一个显示器中组合多个线性渐变

html - 在一个显示器中组合多个线性渐变

问题描述

我希望将三个线性渐变组合到一个图像背景中，如下所示：三个渐变，但还没有找到这样做的好方法。

当我尝试将线性渐变 css 属性与多个元素一起使用时，我无法在我的 css 中提供除实体元素之外的任何东西。例如，这会导致只出现一个渐变：

.bg-grad {
    background: rgb(255, 255, 255);

    background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(192, 204, 92, 1) 100%
        ),
        linear-gradient(
            180deg,
            rgba(120, 196, 212, 1) 0%,
            rgba(255, 255, 255, 1) 100%
        );
}
<div class="bg-grad" >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus expedita doloribus ducimus nam rem, eaque tempora aliquid accusamus repellat aut error suscipit a molestiae voluptas soluta ad eius quo. Nobis tempora facere, dicta perferendis vel perspiciatis illum? 

</div>

任何帮助将不胜感激！

标签： htmlcssbackground-imagelinear-gradients

解决方案

使用三个渐变作为背景图像并使用background-size& background-position。

body {
  background-image: 
  linear-gradient( 0deg, rgba(255, 255, 255, 1) 0%, rgba(192, 204, 92, 1) 100%), 
  linear-gradient( 180deg, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) 100%), 
  linear-gradient( 0deg, rgba(120, 196, 212, 1) 0%, rgba(255, 255, 255, 1) 100%);
  background-repeat: no-repeat;
  height: 100vh;
  background-size: 33.333%;
  background-position: left, center, right;
}

推荐阅读