Question

如何使用纯HTML JS和CSS创建这样的效果（见下图）？

alt text http://superior0.narod.ru/process5.jpg

对于网站backgrownd（我因为JS CSS和HTML而能够改变颜色）

Answer 1

嗯，这可以通过CSS Gradients来完成但是，我不确定是否所有浏览器都支持。

对于跨浏览器支持，请使用this library。

Answer 2

我认为这可能需要一个图像（可以通过CSS设置到你希望放入其中的任何容器的背景），但我认为你不能用纯脚本来做这个。 / p>

Answer 3

从技术上讲，可以使用CSS更改背景图像。让它从左到右正确地平铺意味着以宽度创建图像，使得水平重复（背景重复：重复-x）图像之间的边界无缝，这样看起来每条对角线都会在左侧拾取右边图像上的对角线离开了。

Answer 4

您需要采用不同的方法。

查看此网址：http://www.eyecon.ro/colorpicker/。

正如您在向上和向下移动滑块时所看到的那样，它会更改选择器div的背景。

但是如果你用Firebug检查过这个DIV，你会发现它总是使用这个图像：http://www.eyecon.ro/colorpicker/images/colorpicker_overlay.png

..因为父div正在使用实际颜色：

<div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div>

尝试在firebug中替换此背景值，例如将其设置为green - 您将看到渐变仍然存在，但此时渐变为绿色。

这就是我们的伎俩。使用上面显示的模式创建半透明PNG图像以用作背景。 将它放在纯色背景上，当您更改背景颜色时，它看起来就像是替换了背景图像。

所以在理论代码中：

body { background:red; margin:0; padding:0; /* make sure overlay can stretch 100% in all directions*/ }
#background-overlay { background:url(path/to/image.png); }

<body>
  <div id="background-overlay">
  ..content goes here
  </div>
</body>

这种方法的缺点是IE6不支持PNG文件的透明度。您可以使用某种png transparency fix或完全忽略此效果的IE6用户。（因为我们不关心他们的感受，对吧？; - ））

仍然以我的拙见认为，这是达到你想要的效果最合适的方式，知道你以后想要改变背景颜色。

如何使用纯HTML JS和CSS创建这样的（见下图）效果？

4 个答案: