具有渐变响应的背景 [英] Background with gradient responsive
问题描述
我有以下代码:(
但如果我有更大的设备，就会发生这种情况:
解决方案:(TL;DR)
如果您需要响应式渐变，最好使用 to [side] [side] 语法而不是使用角度.下面是一个可以生成响应三角形的片段.
body {背景颜色:红色；}#grad1 {高度:100px；宽度:100%；背景:线性梯度(到右下角，rgba(255, 255, 255, 0) 49.9%, rgba(255, 255, 255, 1) 50.1%)；}<div id="grad1"></div>说明:
如果我们详细了解渐变的角度如何影响渐变的起点和终点，就可以理解所讨论的渐变在较小宽度处变成三角形而在较大宽度处变成梯形的原因.
为什么成角度的线性渐变会在不同的宽度产生不同的形状?
线性渐变始终由轴定义(称为渐变线).这可以被认为是通过包含渐变的框的中心绘制的线(下面屏幕截图中的黑线)，并按渐变的角度旋转.0deg 线从底部开始向上，而 90deg 线向右.
除了渐变线，渐变还有一个假想的起点和一个终点.渐变的起始线是框的左上角(与渐变线起点在同一象限的角)到渐变线和终点的垂线line是框的右下角(对角)到渐变线的垂线.
这条假想渐变线上的每个点都将具有特定的颜色，具体取决于渐变定义.在下面的例子中，我使用了一个 50% 透明的渐变，其余部分是白色的.所以渐变线上半部分的所有点都是透明的，下半部分的点都是白色的.
正如您在下面的屏幕截图中看到的，随着框的宽度增加，起点和终点之间的距离变得越来越大，这也会影响中点(中间绿线).因此，渐变变为白色的点随着宽度的增加而变化，因此形状也会发生变化.
为什么左右线性渐变在所有宽度上都保持形状?
当使用左右语法时，渐变线的角度使其指向(或指向)指定角所在的同一象限(在这种情况下，它指向第二象限，因为那是盒子右下角的位置).它的角度也使得它垂直于连接盒子两个相邻角的线(在这种情况下，它是左下角和右上角).由于渐变线的角度是自动调整的，使其垂直于对角线(连接两个相邻角的线)，因此它总是为半 n 半渐变生成一个三角形.
<小时>下面的代码段不是解决方案(在上面).这就是我用来创建上面的屏幕截图并考虑将其留在这里以供娱乐的方法:D
对于有角度的渐变:
div {位置:相对；显示:内联块；高度:100px；背景:线性渐变(521 度，透明 50%，白色 50%)；边距:200px 50px；边框:1px纯黑色；}#div-大{宽度:400px；}#div-小{宽度:200px；}div:在{之后位置:绝对；内容: '';宽度:计算(100% + 24px)；左:-12px；背景:线性渐变(向右，透明计算(50% - 1px)，黑色计算(50% - 1px)，黑色计算(50% + 1px)，透明计算(50% + 1px))，线性渐变(向右，绿色6px，透明6px)；背景位置:0px 0px, 0px, calc(50% - 1px);背景重复:不重复，重复-x；背景尺寸:100% 100%，12px 2px；边框顶部:2px 绿色虚线；边框底部:2px 绿色虚线；变换:旋转(521度)；}#div-大:之后{高度:计算(100% + 125px)；顶部:-64px；}#div-小:之后{高度:计算(100% + 60px)；顶部:-32px；}身体 {背景:砂褐色；}<div id='div-small'></div><div id='div-large'></div>对于左右渐变:
div {位置:相对；显示:内联块；高度:100px；边距:200px 50px；边框:1px纯黑色；}#div-大{宽度:400px；背景:线性渐变(526 度，透明 50%，白色 50%)；}#div-小{宽度:200px；背景:线性渐变(513.5 度，透明 50%，白色 50%)；}div:在{之后位置:绝对；内容: '';宽度:计算(100% + 24px)；左:-12px；背景:线性渐变(向右，透明计算(50% - 1px)，黑色计算(50% - 1px)，黑色计算(50% + 1px)，透明计算(50% + 1px))，线性渐变(向右，绿色6px，透明6px)；背景位置:0px 0px, 0px, calc(50% - 1px);背景重复:不重复，重复-x；背景尺寸:100% 100%，12px 2px；边框顶部:2px 绿色虚线；边框底部:2px 绿色虚线；}#div-大:之后{高度:计算(100% + 93px)；顶部:-48px；变换:旋转(526度)；}#div-小:之后{高度:计算(100% + 78px)；顶部:-41px；变换:旋转(513.5度)；}身体 {背景:砂褐色；}<div id='div-small'></div><div id='div-large'></div>免责声明:我的解释深受这个MDN 页面，但我已经尽量用我自己的话说了:)
I have the following code: (Fiddle)
body {
background-color: red;
}
#grad1 {
height: 100px;
width: 100%;
background: linear-gradient(521deg, rgba(138, 138, 138, 0) 50%, rgba(138, 138, 138, 0) 31.9%, #fff 0.1%, #fff 0%);
}
<div id="grad1"></div>
I basically want the width to be responsive and the gradient's shape to be maintained even though the width changes.
What I've tried:
- Set the width to 100% this doesn't work because its an empty div
That's about it, I have no other ideas to be honest. I'd appreciate if someone could help.
This is what I'm using it for: (the images are just an example to show what happens/what I mean)
But if I have a bigger device this happens:
Solution: (TL;DR)
If you need responsive gradients, it is always better to use the to [side] [side] syntax instead of using angles. Below is a snippet that would produce a responsive triangle.
body {
background-color: red;
}
#grad1 {
height: 100px;
width: 100%;
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 49.9%, rgba(255, 255, 255, 1) 50.1%);
}
<div id="grad1"></div>
Explanation:
The reason why the gradient in question becomes a triangle at smaller widths and becomes sort of a trapezoid at larger width can be understood if we have a detailed look at how the angle of the gradient affects the start and end points of the gradient.
Why the angled linear gradient produces different shapes at different widths?
Linear gradients are always defined by an axis (which is referred to as the gradient line). This can be thought of as a line that is drawn through the center of the box that contains the gradient (the black line in the below screenshot) and is rotated by the angle of the gradient. The 0deg line starts at bottom and goes upwards whereas 90deg line goes towards right.
In addition to the gradient line, gradients also have an imaginary start point and an end point. The start line of the gradient is the perpendicular line from top-left corner (the corner that's in the same quadrant as the gradient line's starting point) of the box to the gradient line and the end line is the perpendicular line from the bottom-right corner (opposite corner) of the box to the gradient line.
Each point on this imaginary gradient line will have a certain color depending on the gradient definition. In the below case, I have used a gradient that is transparent for 50% and is white for rest. So all points on the top half of the gradient line will be transparent and those on the bottom half will be white in color.
As you can see in the below screenshot, the distance between the start and end points become more and more as the width of the box increases and this affects the mid point also (the mid green line). So, the point from where the gradient becomes white changes as the width increases and thus the shape also changes.
Why the side to side linear gradient maintains the shape at all widths?
When the side to side syntax is used, the gradient line is angled such that it points into (or towards) the same quadrant in which the specified corner is (for this case, it points towards the 2nd quadrant because that is where the bottom right corner of the box is). Its is also angled in such a way that it is perpendicular to a line that connects the two neighbouring corners of the box (in this case, it'd be the bottom left corner and top right corner). Since the angle of the gradient line is automatically adjusted such that it is perpendicular to the diagonal (line connecting the two neighbouring corners), it always produces a triangle for a half-n-half gradient.
The below snippet is not the solution (that is on top). This is what I used to create the screenshot above and thought of leaving it here for fun :D
For angled gradient:
div {
position: relative;
display: inline-block;
height: 100px;
background: linear-gradient(521deg, transparent 50%, white 50%);
margin: 200px 50px;
border: 1px solid black;
}
#div-large {
width: 400px;
}
#div-small {
width: 200px;
}
div:after {
position: absolute;
content: '';
width: calc(100% + 24px);
left: -12px;
background: linear-gradient(to right, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to right, green 6px, transparent 6px);
background-position: 0px 0px, 0px, calc(50% - 1px);
background-repeat: no-repeat, repeat-x;
background-size: 100% 100%, 12px 2px;
border-top: 2px dashed green;
border-bottom: 2px dashed green;
transform: rotate(521deg);
}
#div-large:after{
height: calc(100% + 125px);
top: -64px;
}
#div-small:after{
height: calc(100% + 60px);
top: -32px;
}
body {
background: sandybrown;
}
<div id='div-small'></div>
<div id='div-large'></div>
For side to side gradient:
div {
position: relative;
display: inline-block;
height: 100px;
margin: 200px 50px;
border: 1px solid black;
}
#div-large {
width: 400px;
background: linear-gradient(526deg, transparent 50%, white 50%);
}
#div-small {
width: 200px;
background: linear-gradient(513.5deg, transparent 50%, white 50%);
}
div:after {
position: absolute;
content: '';
width: calc(100% + 24px);
left: -12px;
background: linear-gradient(to right, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to right, green 6px, transparent 6px);
background-position: 0px 0px, 0px, calc(50% - 1px);
background-repeat: no-repeat, repeat-x;
background-size: 100% 100%, 12px 2px;
border-top: 2px dashed green;
border-bottom: 2px dashed green;
}
#div-large:after{
height: calc(100% + 93px);
top: -48px;
transform: rotate(526deg);
}
#div-small:after{
height: calc(100% + 78px);
top: -41px;
transform: rotate(513.5deg);
}
body {
background: sandybrown;
}
<div id='div-small'></div>
<div id='div-large'></div>
Disclaimer: My explanation is heavily influenced by this MDN page but I've tried to put as much of it in my own words as possible :)
这篇关于具有渐变响应的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
