css - 颜色渐变不显示

标签 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 = "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>

下面是我的 CSS 代码。我使用 -webkit-gradient 作为颜色渐变:

* {
     background-color: #ccc;
 }

 h1.Ph {
     background-color: white; font-family: Arial; padding: 20px; 
     text-decoration:underline;
     text-align: center;
 }

 p {
    padding: 5px; margin: 0px;
    text-align: center;
 }

 div {
    background-color: -webkit-gradient(top, bottom,rgb(238,62,128), rgb(0,136,221));
    font-family: Courier;
 }

你能解释一下为什么<div>没有从上到下的颜色渐变吗? ?

感激不尽 萨德

最佳答案

渐变不是 background-color 的值,而是 background-image

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

演示在 http://jsfiddle.net/L6bQ9/

关于css - 颜色渐变不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14121382/

相关文章:

css - JSF-h :panelGrid specific style for specific column

css - 移除所有子元素的样式

css - 从 Woocommerce 中的 Select2 下拉选项中删除元素符号

CSS 样式跨度类

css - 悬停/链接状态仅在链接的某些区域触发

html - &lt;!DOCTYPE html> 删除媒体查询样式

css - 仅在无重复背景图像上应用背景渐变

css - Chrome 在呈现多个渐变时在中间留下空白/间隙

image - 是使用图像还是 CSS 来尽可能保持网页或应用程序的性能更好?

Android创建带渐变的透明层