Css 颜色渐变不显示_Css_Linear Gradients

Css 颜色渐变不显示

css

Css 颜色渐变不显示,css,linear-gradients,Css,Linear Gradients,我正在尝试用html编写一个pH值刻度，包括颜色。我希望颜色从酸性到碱性（从顶部到底部）平稳过渡。但是，pH颜色不显示。以下是html代码： <!DOCTYPE html> <html> <head> <link rel = "STYLESHEET" type = "text/css" href = "Ph.css"> <title >Ph SCALE</title> <h1 class = "

我正在尝试用html编写一个pH值刻度，包括颜色。我希望颜色从酸性到碱性（从顶部到底部）平稳过渡。但是，pH颜色不显示。以下是html代码：

<!DOCTYPE html>
<html>
<head>
    <link rel = "STYLESHEET" type = "text/css" href = "Ph.css">
    <title >Ph SCALE</title>
    <h1 class = "Ph">THE pH SCALE</h1>
</head>
<body>
    <div>
        <p class = "zero">0.0 very acidic</p>
        <p class = "one">1.0</p>
        <p class = "two">2.0</p>
        <p class = "three">3.0</p>
        <p class = "four">4.0</p>
        <p class = "five">5.0</p>
        <p class = "six">6.0</p>
        <p class = "seven">7.0 neutral</p>
        <p class = "eight">8.0</p>
        <p class = "nine">9.0</p>
        <p class = "ten">10.0</p>
        <p class = "eleven">11.0</p>
        <p class = "twelve">12.0</p>
        <p class = "thirteen">13.0</p>
        <p class = "fourteen">14.0 very alkaline</p>
    </div>
</body>
</html>

你能解释一下为什么从

的顶部到底部没有颜色渐变吗

感激地

saad

使用

背景图像

而不是

背景颜色
它可以工作
梯度不是背景颜色
的值，而是背景图像

background-image: -webkit-linear-gradient(top,rgb(238,62,128), rgb(0,136,221));

演示时
您不应将pH值标度

放在

头部

中，而应放在

身体

background-image: -webkit-linear-gradient(top,rgb(238,62,128), rgb(0,136,221));