首先看UI小姐姐给前端的设计稿,大标题两边带了2个小翅膀,针对这样的效果,css如何实现?我来总结一下我常用的办法:

1.flex布局,父盒子套三个子元素,分别是“左翅膀”-标题-“右翅膀”,然后父元素设置:{display: flex;justify-content: center;align-items:center;}

2.伪元素实现,标题一个元素H3,css预设为相对定位-固定宽度-水平居中{position: relative;width:240px;margin:0 auto;text-align: center;}然后分别用:before和:after将两翅膀定位在左右,不再啰嗦css代码!

3.background多背景方案,也就是今天主要的重点了,先看一下新手代码:{background: url(../images/book-tt-left.png) no-repeat 560px 16px/80px,url(../images/book-tt-right.png) no-repeat 760px 16px/80px;}
当页面分辨率不变时,翅膀和标题位置是完美的,但是,窗口大小缩放之后,翅膀不居中了,看下图:

是不是想说一句“窝草!”,别急,七娃有补救方案:水平位置变成动态计算就可以了,例如左侧翅膀水平位置: calc((100% - 220px)/2),用100%分辨率减去标题宽度除以2就是左翅膀的水平位置,同理右边的再加上标题宽度就可以了!
完整css:

{ background: url(../images/book-tt-left.png) no-repeat calc((100% - 220px)/2) 16px/80px,url(../images/book-tt-right.png) no-repeat calc((100% - 220px)/2 + 220px)  16px/80px;}

也许还有其他方法实现,有的人也会直接把标题+翅膀变成一张图片,也未尝不可,反正能实现效果就好!多想想,多练练,每个人都能找到属于最佳方法!

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。