Question

我目前正在构建一个WordPress主题，我希望在页面顶部从一个角落到另一个角落有一个标题（在WordPress中，而不是HTML意义上）。最左边的锚点是在右侧填充纯色的图像。锚定最右边的图像是左侧填充纯色的图像。

我想做的是填充介入空间，无论浏览器宽度如何，渐变色从左侧的颜色到其右侧的颜色无缝渐变。有没有办法通过CSS做到这一点？

Answer 1

将渐变作为GIMP中的图像（一个像素高）并查看http://www.cssplay.co.uk/layouts/background.html

Answer 2

没有纯CSS的方法，但使用CSS的一个解决方案是为您可以拥有的最大屏幕宽度制作足够宽度的背景图像，并使其延伸到当前浏览器宽度。

另一种方法，如果它的颜色相同，那就是在GIF中制作一个越来越透明的背景图像，并设置一个你选择的背景颜色。

请参阅this或this。

Answer 3

这是一种没有图像的方法。你可以认为这是一个黑客，但它在某种程度上完成了工作。根据需要调整渐变中的步数。如果您希望它自动缩放以填充窗口，请使用更多<b>元素，不要将边框用作渐变步骤之一。然后使用百分比宽度调整<b>元素的大小。如果你想保持较小的下载量，你甚至可以使用Javascript生成渐变。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title></title>
    <style type="text/css">
    .grad b {
       display: block;
       float: left;
       width: 16px;
       height: 100%;
       border-left-width: 16px;
       border-right-width: 16px;
       border-left-style: solid;
       border-right-style: solid;
       border-left-color: #FF0000;
       background-color: #EE0011;
       border-right-color: #DD0022;
    }
    .grad b+b {
       border-left-color: #CC0033;
       background-color: #BB0044;
       border-right-color: #AA0055;
    }
    .grad b+b+b {
       border-left-color: #990066;
       background-color: #880077;
       border-right-color: #770088;
    }
    .grad b+b+b+b {
       border-left-color: #660099;
       background-color: #5500AA;
       border-right-color: #4400BB;
    }
    .grad b+b+b+b+b {
       border-left-color: #3300CC;
       background-color: #2200DD;
       border-right-color: #1100EE;
    }
    .grad b+b+b+b+b+b {
      border: none;
      background-color: #0000FF;
    }
    .grad {
      float: left;
      font-size: 100%;
      height: 30px;
    }
    </style>
  </head>
  <body>
    <div class="grad">
      <b></b>
      <b></b>
      <b></b>
      <b></b>
      <b></b>
      <b></b>
    </div>
  </body>
</html>

在CSS中创建可变宽度渐变填充

3 个答案: