可以的,只要把它们用逗号隔开即可,如果你愿意,你甚至可以用多张图片与多个渐变进行复杂的效果叠加。比如下面是两张图片错开位置后放到渐变背景上的例子:
<style>
#ddiv
{
width:480px height:360px
background: url(图片1) no-repeat 30px 20px, url(图片2) no-repeat 160px 180px,-webkit-linear-gradient(top,#966,#8ff)
}
</style>
<div id="ddiv"></div>
要注意的是,在background中排列的多个背景元素(图片或渐变),前面的会覆盖后面的(假如它们位置重合的话)
perspective是设置3d效果的景深,通俗来说就是设置你的眼睛与这个3d元素的距离。而生活经验告诉我们,你从远处和近处分别观察同一个物体(比如正方形)时,其3d效果肯定是不同的。还有一个属性是perspective-origin,则是用来设置3d效果的视角的,说白了就是你观察3d元素的角度,正常情况下物体是放在你眼睛的正前方,你眼睛只需平视即可,如果把物体向上下左右不同方向移动,在你的头部不能移动的前提下,你的眼睛要想看到物体就需要随着物体的移动而转动,这就是视角。而在不同的视角下,物体的3d效果肯定也会不同(比如物体移动到你眼睛的上方,你能看到物体的底面,而当它移动到你眼睛的下方时,你看不到底面了,只能看到顶面)。
div{width: 20px
height: 20px
border: 2px solid #000
border-top: none
border-right: none
transform:rotate(45deg)
}