在CSS中自动调整偏斜背景（+图片？） [英] Auto-resizing skewed background in CSS (+ images?)

问题描述

我要将这个PSD图片转换为CSS。我有多个h2s在多个页面，所以内部文本长度和背景颜色可能会有所不同。因此，背景应自动适应任何长度。

I'm going to convert this PSD image to CSS. I've multiple h2s in multiple pages, so the inner text lenght and background-color may vary. Therefore the background should automatically adapt to "any" length.

到目前为止，标记是这样的：

So far, the markup is something like:

<h2 class="sub-heading lab-heading">Laboratori</h2>

我最终可以将内文包装成< span> ，但保持语义有效的标记没有任何额外的元素将是♥ly。

I may eventually wrap the inner text into a <span>, but keeping a semantic valid markup without any additional element would be ♥ly.

内部文本被旋转，但它不是强制的。我现在关注的是偏斜的背景。

The inner text is rotated, but it's not mandatory. What i'm focusing on now is the skewed background.

我对任何使用缩放的背景png的解决方案（例如background-size：cover）伪元素，画布等。但它必须是模块化的。

I'm open-minded to any solution using scaled background pngs (eg. background-size:cover), pseudo-elements, canvas etc. But it must be modular.

非常感谢任何建议。

[update]我正在寻找的图形示例：

[update] A graphical example of what i'm looking for:

重要提示] h2后面有一个不规则图案（不是纯色背景）

[important note] Behind the h2 there's an irregular pattern (not a "solid" color background)

推荐答案

对于感兴趣的人，这里是我的临时解决方案： 现场演示 。

For anyone who's interested, here's my temporary solution: live demo.

我使用这个sprite图片：

I used this sprite image:

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 对于变体）

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 +

background-size 属性不支持继承值，因此实际精灵的高度必须在css中设置:-(
我还在看以获得更有效的解决方案。

Unfortunately, background-size property doesn't support an "inherit" value, so the actual sprite's height must be set in the css :-( I'm still looking for a more efficient solution.

这篇关于在CSS中自动调整偏斜背景（+图片？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！