css中怎么让背景颜色只填充一半

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,要设置背景颜色只填充一半可以使用linear-gradient()函数和background-size属性。下面是一个例子: p { background: linear-gradient

在CSS中,要设置背景颜色只填充一半可以使用linear-gradient()函数和background-size属性。
下面是一个例子:
 p {
    background: linear-gradient(to bottom, #f5f5f5 50%, white 50%);
    background-size: 100% 200%; /* 第一个参数是x轴方向的大小,第二个参数是y轴方向的大小,这里设置y轴方向的大小为原来的两倍 */
  } 

上面的代码中,linear-gradient()函数设置了从上到下渐变的背景,#f5f5f5代表一种灰色,white代表白色,50%表示其中一半的高度。background-size属性指定了背景图像的尺寸。100%表示宽度和元素相同,而200%表示高度为原来的两倍。
这样,这个p元素的背景颜色就只填充了一半,上半部分是#f5f5f5灰色,下半部分是白色。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么让背景颜色只填充一半

粉丝

0

关注

0

收藏

0

已有0次打赏