如何用css设置两个背景

html-css015

如何用css设置两个背景,第1张

body

{

background-image:url(d:/bg.gif)

background-repeat:no-repeat

background-attachment:fixed

}

如何只是设置不平铺，可能会让背景图片随着页面文字滚动，所以还是要对背景图片设置fixed固定。

background-attachment: fixed

background-size: cover

实现背景图平铺展开，各自显示各自区域的背景图

上面transition: all 0.4s ease-in-out

下面opacity: 0.7transform: scale(0.99)

实现动画效果过度，缩放

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

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

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

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