CSS 中的渐变颜色与百分比

问题描述 投票：0回答：6

我只有 CSS 的基础知识。我正在尝试按照以下准则为我的一件物品提供渐变颜色，并且渐变应该是垂直的。

我尝试了下面的颜色，但只有第一种颜色出现在整个区域。我不明白30%和50%。如何实现这一目标？

 .myheader {  
  background: linear-gradient(to bottom, #mycolor1 85%, #mycolor2 45%, #mycolor3 10%);       
  }
html css linear-gradients
6个回答
3
投票

每个人都给出了 

to bottom
解决方案，但简单的解决方案是考虑 
to top
并保留您在图片中使用的百分比值：

linear-gradient(to top, #mycolor3 10%, #mycolor2 45%, #mycolor1 85%);

示例：

body {
  background: linear-gradient(to top, red 10%, purple 45%, blue 85%);
  margin: 0;
  height: 100vh;
}

关于（50％和30％）之间的百分比，它们“可能”是颜色提示（也称为颜色插值提示）。来自新规格

两个色标之间可以有一个
颜色插值提示

，它指定两侧两个色标的颜色应如何插值到它们之间的空间中（默认情况下，它们线性插值）。任意两个给定颜色停止点之间最多只能有一个颜色插值提示；使用超过此数量会使该功能无效。

示例：

body { background: /* First gradient with hints*/ linear-gradient(to top, red 10%, purple 45%, blue 85%) left /45% 100%, /* Second gradient with hints*/ linear-gradient(to top, red 10%,27.5% ,purple 45%, 57% ,blue 85%) right/45% 100%; background-repeat:no-repeat; margin: 0; height: 100vh; }



    





      

      
      
      

      

        

          

            

              
2
投票

              
            

          

        

        







body {
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to bottom, blue 15%, red 90%) center/cover no-repeat;
}





    





      

      
      
      

      

        

          

            

              
1
投票

              
            

          

        

        




 .myheader {
  width: 100px;
  height: 100px;
  background: linear-gradient(to bottom, blue 15%, purple 45%, red 90%);       
 }


<div class="myheader"></div>







to bottom
方向告诉您渐变是从上到下的。因此，如果第一种颜色是 85%，则意味着它下降到容器高度的 85%。


通过反转百分比（85% -> 15%），您可以达到您想要的结果。

    





      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        



.myheader {  
  background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%
  }


    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
）

$mycolor1: blue;
$mycolor2: purple;
$mycolor3: red;

.myheader {
background: linear-gradient(to bottom, $mycolor1 0%, $mycolor2 50%, $mycolor3 90%);
height: 200px;
width: 100px;
}




https://jsfiddle.net/qa1kLmfc/3/


对于渐变，您可能可以只使用蓝色和红色。 

    





      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients*/

        * {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            flex-direction: column;
            background-color: #eeeeee;
            gap: 20px;
        }

        .wraper {
            gap: 10px;
            display: flex;
        }

        .box {
            width: 150px;
            height: 150px;
            background-color: #fff;
        }

        .box1 {
            background: linear-gradient(
                lime 0%,
                lime 20%,
                red 30%,
                red 45%,
                cyan 55%,
                cyan 70%,
                yellow 80%,
                yellow 100%
            );
        }

        .box2 {
            background: linear-gradient(
                lime 20%,
                red 30%,
                red 45%,
                cyan 55%,
                cyan 70%,
                yellow 80%
            );
        }

        .box3 {
            background: linear-gradient(
                lime 20%,
                red 30% 45%,
                cyan 55% 70%,
                yellow 80%
            );
        }

        .box4 {
            background: linear-gradient(
                lime 25%,
                red 25%,
                red 50%,
                cyan 50%,
                cyan 75%,
                yellow 75%
            );
        }

        .box5 {
            background: linear-gradient(
                lime 25%,
                red 25% 50%,
                cyan 50% 75%,
                yellow 75%
            );
        );
        }

        .box6 {
            background: linear-gradient(
                lime 0% 25%,
                red 25% 50%,
                cyan 50% 75%,
                yellow 75% 100%
            );
        }

        .box7 {
            background: linear-gradient(red, cyan);
        }

        .box8 {
            background: linear-gradient(red, 20%, cyan);
        }

        .box9 {
            background: linear-gradient(TO LEFT,red, 40%, rgba(0, 0, 0, 0));
        }

        .box10 {
            background: linear-gradient(TO RIGHT,red 50%, blue 50%);
        }

        .box11 {
            background: linear-gradient(to right, transparent, mistyrose),
            url("res/critters.png");
            /*width: 310px;*/
        }

        .box12 {
            background: linear-gradient(
                217deg,
                rgb(255 0 0 / 80%),
                rgb(255 0 0 / 0%) 70.71%
            ), linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%),
            linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70.71%);
        }


    </style>
</head>
<body>

<section class="container">
    <div class="wraper">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
        <div class="box box5"></div>
        <div class="box box6"></div>
    </div>
    <div class="wraper">
        <div class="box box7"></div>
        <div class="box box8"></div>
        <div class="box box9"></div>
        <div class="box box10"></div>
        <div class="box box11"></div>
        <div class="box box12"></div>
    </div>
</section>

</body>
</html>





    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.