Question

如何仅使用CSS淡化背景颜色（没有jQuery）？这是我的HTML：

h1 {
    text-align: center;
    font-size: 500%;
    font-family: sans-serif;
    color: white;

}

ul {
    display:inline-block;
    color:white;
    margin-left:100px;
    font-size: 200%;
    font-family: sans-serif;
}

div {

  background: black; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(top, black); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
  background: -webkit-linear-gradient(top, black);
  background: -webkit-linear-gradient(top, #B00000);
  background: -webkit-linear-gradient(top, #B0C4);
  background: -webkit-linear-gradient(top, #B0C4DE);
  background: linear-gradient(to bottom, #B0C4DE); /* Standard syntax */
}

<div id="overlay">
    <h1>Mechanics of JWT</h1>
    <br />
    <br />
    <ul>
      <li>Use JJWT (https://github.com/jwtk/jjwt) for Java</li>
        <li>Developed and maintained by Stormpath <br />(https://stormpath.com/)</li>
    </ul>
</div>

Answer 1

这是你在找什么？

h1 {
    text-align: center;
    font-size: 500%;
    font-family: sans-serif;
    color: white;

}

ul {
    display:inline-block;
    color:white;
    margin-left:100px;
    font-size: 200%;
    font-family: sans-serif;
}

div {

  background: black; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(top, black); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
  background: -webkit-linear-gradient(top, black);
  background: -webkit-linear-gradient(top, #B00000);
  background: -webkit-linear-gradient(top, #B0C4);
  background: -webkit-linear-gradient(top, #B0C4DE);
  background: black linear-gradient(black 0, #B0C4DE 100%); /* Standard syntax */
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="wingspan.css">
</head>
<body>

    <div id="overlay">
        <h1>Mechanics of JWT</h1>

        <br />
        <br />

        <ul>
            <li>Use JJWT (https://github.com/jwtk/jjwt) for Java</li>
            <li>Developed and maintained by Stormpath <br />(https://stormpath.com/)</li>
        </ul>
    </div>

</body>
</html>

如何使用css淡化背景颜色（没有jQuery）？

1 个答案: