用css怎么实现背景色交叉显示？

html-css026

用css怎么实现背景色交叉显示？,第1张

其实很简单啊，通过css 的background: linear-gradient() 就可以实现了，最后一个其实也是可以实现的，先写一个从上到下的重复线性渐变，然后再写一个从做到右的重复线性渐变，第二个颜色设置透明，然后通过定位在一起就可以实现了。都是一些比较简单的效果。

CSS不可以同时定义两个背景，不过你可以嵌套一下，比如：在div里面嵌套一个span，然后可以分别设置背景，以达到自己想要的效果。

做渐变的背景，要突破浏览器的限制，建议用图片做，先在PS 里面根据需要（纵向或横向）制作一张渐变的图片，然后，裁切成1px高或宽的条。

然后在设置背景的时候， 横向（repeat-x）或纵向平铺（repeat-y）就可以了。

如果是纵向渐变，就做竖条，横向平铺。横向渐变，就是做横条，纵向平铺就可以了。 就这么简单。

你的背景图片是什么样的图片，是可重复的图片还是不可重复的，如果是不可重复的，那建议换一张450X450的，如果可重复，那么把background-repeat:no-repeat去掉就好。