我想让我的网站的背景变色到一半.

它应该会褪色到另一种 colored颜色 .我怎么能这么做呢?

网站顶部为绿色,中途变为蓝色,如下所示:

website background color changes halfway down

推荐答案

超级简单,使用linear-gradient(),还加上background-attachment:fixed;,以确保渐变不会重复.

body {
    background-image: linear-gradient(#d3ff6e, #00faff); /* customize colors here */
    background-attachment: fixed; 
}
<html>
    <body></body>
</html>

如果要使黄色更明显一些,请在 colored颜色 后面添加一个百分比,如下所示:

body {
    background-image: linear-gradient(#d3ff6e 35%, #00faff); /* customize colors here */
    background-attachment: fixed; 
}
<html>
    <body></body>
</html>

Html相关问答推荐

CSS位置:固定尊重母公司的保证金属性.""'为什么?

防止SVG边框半径zoom

将2个Flex列合并为1个交替子列

创建带有弯曲边框的水平时间线

如何显示自定义按钮以将产品添加到WooCommerce购物车?

是否有语义 HTML 可以澄清含义?

Angular MatBadge 在高于 99 时不显示完整数字

如何将 元素与常规文本垂直对齐

如何使文本区域自动扩展到最大高度?

Angular:从服务器下载 HTML 并打印

如何将 HTML DateTime 转换为 Golang Time 对象

如何在图片前面放置下拉框?

如何将自定义图像插入 Shiny plot header?

无法使用 flexbox 裁剪图像

我如何设置括号的样式,使它们不会挂在旁边的其他字符下面

让 Iframe 覆盖整个页面

font awesome 的 CDN/CSS 如何工作?

在一行中对齐两个不同形式的按钮

列宽等于最宽列宽度的无界容器

使用 CSS 的发光边框动画没有流畅的过渡