英文:
Changing size of gradient causes it to fade
问题
我有一个线性渐变。这是我的代码：
background: linear-gradient(145度, #3fd8f6 50%, #609210 50%);
它看起来像这样：
我想要改变它，使蓝色部分比绿色部分小。所以我将我的代码更改为：
background: linear-gradient(145度, #3fd8f6 30%, #609210 70%);
但这会导致渐变消失：
如果我使用"to left"而不是"145度"，我可以使蓝色部分比绿色部分小，但我的渐变不会倾斜...它将只是一条直线，这不是我想要的。
如何使它仍然看起来像第一张图片，但蓝色部分比绿色部分小呢？例如：蓝色30%，绿色70%。
英文:
I have a linear gradient. This is my code:
background: linear-gradient(145deg, #3fd8f6 50%, #609210 50%);
It looks like this:
I want to change it so that the blue part is smaller than the green part. So I changed my code to this:
background: linear-gradient(145deg, #3fd8f6 30%, #609210 70%);
But that causes the gradient to fade:
I can get the blue part smaller than the green if I use "to left" instead of "145deg" but then my gradient won't be skew... it will just be a straight line, and that is not what I want.
How can I get it to still look like the first image but where the blue part is smaller than the green? For example: blue 30%, and green 70%.
答案1
得分: 0
background: linear-gradient(145deg, #3fd8f6 30%, #609210 30%);
英文:
You need to set both to stop at the same place if you don't want the colors to fade, so you could set it to 30% for both if you want the fade to be at 30% for blue.
background: linear-gradient(145deg, #3fd8f6 30%, #609210 30%);
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
.gradient {
background: linear-gradient(145deg, #3fd8f6 30%, #609210 30%);
width: 600px;
height: 100px;
}
<!-- language: lang-html -->
<div class="gradient"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论