网页设计里面怎么用css定位图片的不规则摆放？（如图）
我在用css写这张网页，比如图片上的3张照片和文字的摆放不规则，怎么用代码写好呢？求师傅，我愿意跟高手学习~~~还有，我希望鼠标经过图片时有特殊效果（比如加灰或者放大），...
我在用css写这张网页，比如图片上的3张照片和文字的摆放不规则，怎么用代码写好呢？求师傅，我愿意跟高手学习~~~还有，我希望鼠标经过图片时有特殊效果（比如加灰或者放大），是不是一定要用js或者jq？？？我不会js。。如果有师傅愿意耐心教我，我会努力努力学习的！！！
展开
3个回答
展开全部
百度：css3 变形(低版本ie和少部分浏览器不支持)
低版本ie的实现：
先把图片在ps里面拉斜做影子后存为：png24+背景透明格式，然后网页里面用cssz-index控制层级上下关系，并用定位摆放到合适的位置。另外你还要修正一下ie6的png24背景不透明的问题。
然后，你给那三个猫咪图片每张一个id：
<img src="aaa.jpg" id="cat1" />
<img src="bbb.jpg" id="cat2" />
<img src="ccc.jpg" id="cat3" />
#cat1,#cat2,#cat3{position:absolute;}/*绝对定位*/
#cat1{
left:300px;top:80px;
z-index:10;
}
#cat2{
left:50px;top:320px;
z-index:9;
}
#cat3{
left:300px;top:80px;
z-index:8;
}
低版本ie的实现：
先把图片在ps里面拉斜做影子后存为：png24+背景透明格式，然后网页里面用cssz-index控制层级上下关系，并用定位摆放到合适的位置。另外你还要修正一下ie6的png24背景不透明的问题。
然后，你给那三个猫咪图片每张一个id：
<img src="aaa.jpg" id="cat1" />
<img src="bbb.jpg" id="cat2" />
<img src="ccc.jpg" id="cat3" />
#cat1,#cat2,#cat3{position:absolute;}/*绝对定位*/
#cat1{
left:300px;top:80px;
z-index:10;
}
#cat2{
left:50px;top:320px;
z-index:9;
}
#cat3{
left:300px;top:80px;
z-index:8;
}
更多追问追答
追问
百度了，我想了解的是写这种不规则排版的代码思路，还有就是如果想单独对每张图片加特效是否一定用js或者结合flash。。。不过，谢谢你的回答，帮我打开了思路。
追答
你看到的不规则，其实都是规则的，网页里面任何东西都逃不过正方形的原始区域；
只是在视觉上你感觉它不规则了而已。
单独对每张图片加特效这个不好回答，因为你没给出定义哪种才算是特效，如果鼠标指上去换张图也是特效的话，很多都可以不用js或flash。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
其实你是思维定势了，图片基本都是方正行的，基本不可能弄出这样，要是先做成这样，就吧不想要的部分弄成透明就好了，呵呵。
更多追问追答
追问
基本不可能做出来？。。方方正正的二列或者三列栏我就会做，但是不规则视觉效果好一点的，我就不太会了，很想做出如图这种效果！！非常想。。有办法么？
追答
明白图片都是方正型的，这点很好，就比如把，你看看平时做那些圆点的GIF的图片，他们其实是一个正方型，然后画一个圆，然后把其它多余的都变成透明的，然后就得到一个圆点了是把，你这个也一样呀，本来也是一个长方形的图片，弄好了自己的图片，就把多余的去掉，然后旁边就是透明的了，放上去是可以是这样的效果了，我觉得这样做是最简便的方法，当然还有其它的方法，建议你用这个把。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
很简单！
直接一张图片！他原来也肯定是一张图片，要不就是flash
而且，做成这样，都是不可以后台更新的，不需要分开
直接一张图片！他原来也肯定是一张图片，要不就是flash
而且，做成这样，都是不可以后台更新的，不需要分开
更多追问追答
追问
直接一张图片的话那如果做成每张图片都有特效岂不麻烦？比如我想做成一种效果——鼠标点击每张图片，然后粘着的胶布会撕开，图片就掉下来放大到眼前——这些是不是用flash做好？还是js可以完成？
追答
js做的话，做不出撕开的效果，只能用flash
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
