我要将这个PSD图像转换成CSS.我有多个h2s在多个页面,所以内部文本长度和背景颜色可能会有所不同.因此背景应自动适应“任何”长度.
到目前为止,标记是这样的：
- <h2 class="sub-heading lab-heading">Laboratori</h2>
我可能最终将内部文本包装到< span>中,但是保留没有任何附加元素的语义有效的标记将是♥ly.
内部文本旋转,但不是强制性的.我现在关注的是倾斜的背景.
对于使用缩放背景png(例如background-size：cover),伪元素,画布等的任何解决方案,我都是开放的,但它必须是模块化的.
非常感谢任何建议.
[更新]我正在寻找的图形示例：
[重要注意事项] h2后面有不规则的图案(不是“实心”的颜色背景)
解决方法
对于有兴趣的人来说,这是我的临时解决方案：
live demo.
我使用这个精灵图片：
HTML：
- <div class="container">
- <h2 class="sub-heading"><span class="sub-heading-txt">Short title</span></h2>
- </div>
- <div class="container">
- <h2 class="sub-heading"><span class="sub-heading-txt">A bit longer title</span></h2>
- </div>
- <div class="container">
- <h2 class="sub-heading"><span class="sub-heading-txt">A damn long title is here!</span></h2>
- </div>
(.container div仅用于变体)
CSS：
- .sub-heading,.sub-heading:after,.sub-heading:before {
- background:url(tha-sprite-url.png) 0 0 no-repeat;
- }
- .sub-heading {
- position:relative;
- display:inline-block; clear:both;
- margin-left:31px; padding:0 18px 10px 0;
- font-size:25px; font-weight:normal; color:#FFF; line-height:47px;
- background-position:0 -75px;
- background-size:100% 282px; /* the sprite's height */
- }
- .sub-heading:before,.sub-heading:after { content:" "; position:absolute; top:0; }
- .sub-heading:before { left:-31px; width:31px; height:57px; }
- .sub-heading:after { right:-12px; width:12px; height:42px; background-position:-150px 0; }
- .sub-heading-txt {
- display:block;
- -webkit-transform:rotate(-2deg); -ms-transform:rotate(-2deg); transform:rotate(-2deg);
- }
- /* variations */
- .container { margin-bottom:10px; }
- .container:nth-child(3n+2) .sub-heading { background-position:0 -150px; }
- .container:nth-child(3n+2) .sub-heading:before { background-position:-50px 0; }
- .container:nth-child(3n+2) .sub-heading:after { background-position:-175px 0; }
- .container:nth-child(3n+3) .sub-heading { background-position:0 -225px; }
- .container:nth-child(3n+3) .sub-heading:before { background-position:-100px 0; }
- .container:nth-child(3n+3) .sub-heading:after { background-position:-200px 0; }
在IE9上工作
