在 CSS 中自动调整倾斜背景的大小（+ 图像？）答案

【问题标题】：Auto-resizing skewed background in CSS (+ images?)在 CSS 中自动调整倾斜背景的大小（+ 图像？）
【发布时间】：2013-02-16 00:09:51
【问题描述】：

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

到目前为止，标记类似于：

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

我最终可能会将内部文本包装成<span>，但保持语义有效标记而不需要任何额外元素将是♥ly。

内部文本是旋转的，但这不是强制性的。我现在关注的是倾斜的背景。

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

非常感谢您的任何建议。

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

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

【问题讨论】：

+1 提出了一个好问题……我想不通。 CSS3 形状并不能完全完成工作，并不是你想要的那样。我有一种感觉，这将不得不在 javascript 中完成。
你需要支持哪些浏览器？
@dave IE9+，我将为 IE8 添加一个简单的后备
我看不出用不规则图案作为背景的方法。您是否仍然对使用纯色背景颜色和没有#fff 的切出边缘的方法感兴趣？
嗯，谢谢，但不，谢谢@dave，这就是米格的答案......

标签： html css background-image autoresize skew

【解决方案1】：

对于任何感兴趣的人，这是我的临时解决方案：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+

不幸的是，background-size 属性不支持“继承”值，因此必须在 css 中设置实际精灵的高度 :-( 我仍在寻找更有效的解决方案。

【讨论】：

【解决方案2】：

通过结合 CSS 形状、定位、:before 和 :after 选择器，我设法使容器可扩展到任何内容。但是，这种方法只适用于现代浏览器，似乎没有 js 就没有合适的解决方案。此外，在这种情况下，svg 的使用可能非常少，但您再次受限于浏览器兼容性。

这是使用纯 CSS 的演示：http://jsfiddle.net/qaWKX/

编辑

如果没有额外的 JS 函数，使用svg 是没有用的。所以我放弃了这种方法。然而，唯一合适的解决方案依赖于 CSS3，但不使用 :before 和 :after 选择器。我以前的方法是依靠创建隐藏h3 标题两侧的伪元素。当背景没有纯色时，隐藏是不够的。

根据这个逻辑，我需要一个background，它将透明度和实心填充相结合。答案在 CSS3 linear-gradient background 上。

详细说明： 1.我旋转了h3标题 2. 我用它的容器遮住了顶部区域（top:-value 或margin-top:-value） 3. 我在每一侧设置了 2 个linear-gradient 背景图片

这是演示：http://jsfiddle.net/P5gLE/1/

【讨论】：

酷！但我不能使用白色边框，因为 h2 的背景是不规则图案... p.s.不需要 -moz-transform
我了解 CSS 解决方案的局限性，因此我建议将 svg 用作 background-image 并将 background-size 设置为 100%。 svg 尺寸越大，调整大小的质量就越好。并且不要忘记它是矢量，因此它取决于浏览器的 svg 引擎如何加载svg 背景。这是一个演示：jsfiddle.net/sSaBJ/1 注意：svg 文件只有 481 个字节！
呵呵，谢谢，这就是我实际上对 png 图像所做的（检查我自己的答案，刚刚发布）以避免 svg 的透明度问题。另外，我不得不剪掉左右两侧以保持“偏度”
不错的临时解决方案。每个解决方案（您的或我的）中的唯一问题是 bg 颜色无法通过 css 编辑。
酷！为避免出现白色中间线，只需设置background-size: 51% 100%;。另外，我会选择inline-block，而不是display:table 和table-cell（跨浏览器更一致）。 Check my version of your edit。不幸的是，ie9 不支持 css 渐变 :-( 无论如何都很棒！

【解决方案3】：

这里是html：

<br>
<div class="scewed-shape">
    <div class="text-align">here is a very long text adsadsad</div>
</div>
<br>
<br>
<div class="scewed-shape">
    <div class="text-align">this one is shorter</div>
</div>

这是制作自定义形状的 css：

.scewed-shape {
    display:inline-block;
    -webkit-transform: perspective(500px) rotateY(34deg);
    -ms-transform: perspective(500px) rotateY(34deg);
    left: -25px;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}
.scewed-shape .text-align {
    position: relative;
    top: -25px;
}

【讨论】：

非常感谢您花时间构建插件，但我可以通过将inline-block 设置为.scewed-shape ... demo 来实现不使用javascript 的相同结果。这是一个很好的起点，但我的演示中的形状更复杂。哦，transform 只需要 -webkit 和 -ms 前缀；-)
重点是，不管你的形状有多复杂，你都可以用这段javascript来调整宽度，你应该准备好了
嗯，是的，不知何故，这可能是一个难题。但我仍然需要使用 css 或调整大小/切片图像来构建该形状，以使形状本身自动调整。这就是问题的重点..
形状很好，非常感谢。但是使用这种方法，文本也会变形，并且我使用的自定义字体不会很好地显示:-(无论如何，如果你用新的演示改变你的原始答案，我会支持它;-)
@Giona ，我改变了原来的答案

【解决方案4】：

我认为仅使用h2 是不可能的。倾斜边的不同角度会出现问题，这意味着您需要一个用于倾斜和变换的“容器”。

根据你的例子，我想出了以下内容：

http://jsfiddle.net/Cbx2q/1/

如您所见，这有几个维护问题：

“幻数” - 这些将需要根据您选择的倾斜 + 大小进行调整。
使用转换的字体渲染效果稍差。

否则，它似乎工作。除了使用伪元素和 CSS3 之外，最好的解决方案可能是使用普通的旧图像作为每个菜单项的背景。

【讨论】：

这个想法很完美，但不幸的是我没有纯色背景，所以带有伪元素的#fff三角形在我的情况下不起作用。干得好，点赞
@Giona 我没有注意到纯色背景色位...您最好只为整个菜单制作纯色背景，然后为每个菜单项制作背景图像。倾斜的文本还意味着您可以使用图像中的文本来获得不错的 IE 支持。谢谢。
不是菜单项，而是文章中的小节标题，由不同作者通过cms编写。所以我不能为每一个新的子标题制作一个图像。文章背景是木质的不规则图案……也许我应该干脆杀了 Photoshop 设计师 ;-)
我能想到的唯一选择是使用canvas 或 SVG 如果可能的话来创建和显示背景以及可能的文本。不过，不确定这对透明度的影响如何。
几个月前我用 SVG 做了一些测试用例，即使在现代浏览器中透明度也有问题（叹气）。画布肯定是一种选择，但我真的不知道从哪里开始

【解决方案5】：

如何使用 CSS 形状？我和他们一起工作的时间不多，但这似乎是一个不错的起点。

http://css-tricks.com/examples/ShapesOfCSS/

【讨论】：

我在上面看到的就是这样，但这不是一个非常理想的解决方案，定位文本会很困难。
CSS 形状使用边框来实现效果，并且由于无法使用百分比设置边框宽度，因此该技术不适用于此用例，因为无法将它们缩放到不同的文本长度。

【解决方案6】：

我能想到的一个简单的解决方案是对形状的三个不同底部角度使用 3 个元素（我会使用 div），左右两个具有固定大小，中间一个简单地随文本缩放（标题）包含在其中。也许不是最优雅的解决方案，但它肯定会奏效。缺点是您需要大量图像，特别是如果您想要不同颜色的形状。（我不知道如何为背景图像着色）。

但是，如果形状周围的空间具有纯色背景色，您实际上可以将 3 个元素的背景色设置为您想要的颜色，并让您使用的实际图像具有与背景相同的颜色作为负空间，在您想要实际形状的地方保持透明。

另外，如果你真的不想要比你需要的更多的元素，你总是可以使用 :after 和 :before 选择器来伪造它。

【讨论】：

抱歉，我应该指定颜色变化将由第二个 css 类处理，该类在每个 h2 中都不同。不幸的是，容器的背景是不规则的纹理，所以我需要倾斜的背景是透明的。您的想法可能是有效的，但我不确定“碎片”是否适合。感谢您的建议！

【解决方案7】：

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

上述代码将使 IE 5.5 到 8 像现代兼容浏览器一样运行，就页面中的样式/功能而言。此脚本专门用于解决 IE 过去版本中的 CSS/渲染错误。

这里是关于脚本的文档： http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

这是一种“IE 后备”，但可以更好地解决问题。与其制作大量版本的内容以使用不同的浏览器以完全相同的方式呈现，这只是在早期版本的 IE 上强制实现现代兼容性。

我过去曾使用此脚本来修复类似的 CSS 渲染错误。上面的这个特定脚本是将 IE5.5-8 升级到 9。如果您有意将 IE5.5-7 升级到 8（不知道为什么需要，但如果您愿意的话），附加脚本位于下面的网址可以做到这一点。

这是 Google 的页面及其上的文档（也包括此页面上的链接） http://code.google.com/p/ie7-js/

【讨论】：