设置线性渐变的高度和宽度 [英] Setting linear gradient height AND width
问题描述
我知道您可以使用设置线性渐变的宽度
I am aware that you can set the width of a linear gradient using
.grey-block { background: linear-gradient(to right, #f9f9f9 0%, #f9f9f9 35%, white 35%, white 100%); }
以及高度
.grey-block { background: linear-gradient(to bottom, #f9f9f9 0%, #f9f9f9 65%, white 65%, white 100%); }
但是,有没有一种方法可以使用同一条CSS线同时设置高度和宽度?
However, is there a way you can set BOTH the height and the width using a the same css line?
推荐答案
为澄清起见,问题中的代码不设置 height
和 width
的渐变.它正在调整色标,从而产生一个灰色矩形.
To clarify, the code in the question is not setting the height
and width
of the gradient. It's adjusting the color stops, which results in a grey rectangle.
为了调整渐变的实际尺寸,我们需要使用 background-size
属性(以及 background-repeat
)来设置渐变的高度
和宽度
.
In order to adjust the actual dimensions of the gradient, we need to use the background-size
property (as well as background-repeat
) to set the height
and width
of the gradient.
使用 background-size
控制渐变的尺寸,我们可以将CSS重写如下:
With background-size
in control of the gradient's dimensions, we can rewrite the CSS to be as follows:
.grey-block {
background-color: white;
background-image: linear-gradient(#f9f9f9, #f9f9f9);
background-size: 35% 65%;
background-repeat: no-repeat;
}
正在发生的是,我们正在定义纯色的渐变"并限制其大小. background-repeat
(背景重复)已禁用,因此它将仅呈现单个灰色块.
What's happening is that we're defining a "gradient" of a solid color and confining it's size. The background-repeat
is disabled so that it will only render a single grey block.
.grey-block {
background-color: white;
background-image: linear-gradient(#f9f9f9, #f9f9f9);
background-size: 35% 65%;
background-repeat: no-repeat;
}
/* non-relevant styles */
body {
background-color: #222;
}
.grey-block {
height: 200px;
width: 200px;
}
<div class="grey-block"></div>
这篇关于设置线性渐变的高度和宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!