页面实现大头贴功能,相框固定,照片可更换,类似下图。
其实我们可以拆分一下:相框.png是一张图片,金泰熙小姐姐照片.jpg是另一张图片,只要把相框.png叠在金泰熙小姐姐照片.jpg图片前面,那么就实现啦!
先上HTML结构:
相框为固定宽高,假设宽为300px,高为400px。
CSS样式如下:
那么问题来了,photo怎么居中?
试过的不成功解法:
1、把photo设为绝对定位,left:-50%,再设margin-left为负值。由于photo宽度不确定,因此margin-left具体值不确定。
2、宽度设为300px,图片变形。
3、把photo设为绝对定位,margin:auto,left:0,right:0。当box容器宽度小于photo时,该方法失效。
以上方法均无法实现居中后,想到如下可行办法:
HTML结构:
CSS样式:
给photo外加一个div容器photobox,给photobox设定一个足够宽的宽度,再将photobox相对box居中,然后再用text-align:center让photo相对于photobox居中。
photobox容器left值=(photobox容器宽 - box容器宽)/2
用css3绘图,或者用html5的Canvas,简单讲一下:1、CSS3是把多个“矩形”(div)裁剪后,然后拼接成一个图案,然后给图案上色。
2、Canvas由点开始,延长无数个点,得到线,延长线之后得到一个面(三角形,圆形,矩形等等的图案面),然后给线或者面描边,上色。
1,你可以裁剪原图片到你想要的样子就行了2,你可以设置div的大小,然后给他加上属性overflow:hidden,就是溢出的隐藏。
3,设置文字区域为div然后覆盖掉一部分图片区域
望采纳。