多重 CSS 背景图像
2005年6月7日 星期二 (格林尼治标准时间 8:33 AM)
CSS 最令人沮丧的地方之一就是无法为一个盒子应用多个背景图像。
我目前正在做一个特别需要这个功能的网站。目前，唯一的解决办法是添加大量的 span 或 div 标签（或者依赖于更有意义的标签，如果合适的话，但这并不总是可能的）。
情况是这样的。我有一个列表项需要一个特定的小图片。除此之外，我还需要圆角。因为我希望整个元素能够根据内容的大小进行扩展和收缩，所以每个角都需要一个单独的背景图像。
所以 HTML 不可避免地看起来是这样的
<li><span><span><span><span>Booby</span></span></span></span></li>
天哪。
CSS 看起来是这样的
li {background: url(booby.jpg) center no-repeat;}li span {background: url(corner_top_right.gif) top right no-repeat;display: block;}li span span {background: url(corner_bottom_right.gif) bottom right no-repeat;}li span span span {background: url(corner_bottom_left.gif) bottom left no-repeat;}li span span span span {background: url(corner_top_left.gif) top left no-repeat;padding: 0.5em;}
一张漂亮的背景图，以及每角一张图。
CSS 3 提供了多重背景的配置，这将非常棒。如果这能成为一个实际可行的选项就好了。
评论
评论3
哇，bavel。你评论得真快！我在将它们发布之前检查条目的速度有点慢。这已经不是我第一次经历一个小小的恐慌“哦，天哪！XML 解析错误！我肯定漏了什么东西！”了。
不过现在都修好了。谢谢。
Patrick 于 2005年6月7日 星期二 8:44 AM GMT 说道。
评论4
在 CSS3 可用之前，你不能使用 JavaScript 函数来插入所有这些 span 或 div 吗？
就像 nifty-corner？ http://pro.html.it/esempio/nifty/
SteveC 于 2005年6月7日 星期二 9:31 AM GMT 说道。
评论5
啊。确实是一个可能性。不过有利有弊。代码会更整洁，但如果有人没有启用 JavaScript，他们就看不到你想要的展示效果。
Patrick 于 2005年6月7日 星期二 9:36 AM GMT 说道。
评论6
有很多关于圆角文章。真的有必要为所有角使用 4 种不同的图片吗？我不这么认为。
我想你可能已经看过这些了，但这里面一定有一个有用的：http://css-discuss.incutio.com/?page=RoundedCorners 以及我自己的，当然：http://www.ischagast.nl/knutselhoek/ronde-hoeken/
Ischa Gast 于 2005年6月7日 星期二 9:46 AM GMT 说道。
评论7
是的，在这些情况下，确实需要四种不同的图片。如果整个盒子的高度和宽度都可以不同以适应不同的尺寸，那就没有其他办法了。
Patrick 于 2005年6月7日 星期二 9:57 AM GMT 说道。
评论8
也许我太天真了，但既然这种多重背景图像的东西主要是（如果不是唯一的话）用于角，难道不能创造出其他的东西吗？
我想象的是一个像这样的“corner”值
#mybox {
corner-radius: 8px; }
这对于 CSS 的未来版本来说将非常有用。有人知道这种做法有什么潜在的缺点吗？我想我不是第一个希望有这种东西的人。
Olivier 于 2005年6月7日 星期二 10:24 AM GMT 说道。
评论9
我认为 Mozilla 已经有一些专有的 CSS 属性了。至于 CSS 标准，我不确定。这肯定会很酷。
SVG 可能是一个选项...
Patrick 于 2005年6月7日 星期二 10:31 AM GMT 说道。
评论11
啊。抱歉。“可缩放矢量图形”（Scalable Vector Graphics）。我不是专家。请看 http://www.w3.org/TR/SVG/
Patrick 于 2005年6月7日 星期二 11:00 AM GMT 说道。
评论12
引用
是的，在这些情况下，确实需要四种不同的图片。如果整个盒子的高度和宽度都可以不同以适应不同的尺寸，那就没有其他办法了。
但在我发布的例子中，我只需要一张图片，唯一的问题是这张图片必须非常高和宽。我使用了 Roger Johansson 的例子（使用 2 张图片而不是 4 张），并在那里做了一些修改 http://www.456bereastreet.com/lab/teaser/flexible/
这不就是你想要的例子吗？
Ischa Gast 于 2005年6月7日 星期二 1:05 PM GMT 说道。
评论13
你可以将左上角的圆角作为主背景图像的一部分，这样你只需要 3 个额外的 span，而不是 4 个... 这仍然不是理想的，但它使用的无意义标签更少...
keith - SuPeR K! 于 2005年6月7日 星期二 1:07 PM GMT 说道。
评论14
Ischa - 哦，是的！抱歉，我没有仔细看。很巧妙。当然，你需要一个相当大的图片，而且你仍然受限于所有的 HTML 结构。
Keith - 那是假设你不需要那个盒子用于其他目的，就像这个例子一样！
Patrick 于 2005年6月7日 星期二 1:09 PM GMT 说道。
评论16
当 CSS3 变得可行时，圆角的背景将不再是必需的，因为边框（包括圆角）将拥有自己的模块。
http://www.w3.org/TR/css3-border
Richard Rutter 于 2005年6月7日 星期二 3:25 PM GMT 说道。
评论17
我通过使用 :before 和 :after 伪类以及一个 expression 技巧将它简化到了 2 个 span，使其能在 IE 中工作... 代码有点混乱，但只有 2 个 span... 在 ie6/win、firefox 和 opera 中测试过...
// html
<li><span><span>Booby</span></span></li>
// css
li {
background: url(booby.jpg) center no-repeat;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
li span {
background: url(corner_bottom_left.gif) bottom left no-repeat;
display: block;
}
li span span {
background: url(corner_bottom_right.gif) bottom right no-repeat;
padding: 0.5em;
}
li:before {
content: url(corner_top_left.gif);
display: block;
height: 15px;
width: 15px;
}
li span:before {
content: url(corner_top_right.gif);
display: block;
height: 15px;
padding-left: 100%;
margin: -15px 0 -15px -15px;
width: 15px;
}
li span span:before {
display: none;
}
* html li {
font-size: expression(this.runtimeStyle.fontSize="1em", this.innerHTML=''+this.innerHTML+'');
}
* html li span span {
padding: 0;
}
* html li span span span {
background: url(corner_top_left.gif) top left no-repeat;
}
* html li span span span span {
background: url(corner_top_right.gif) top right no-repeat;
padding: 0.5em;
}
keith - SuPeR K! 于 2005年6月7日 星期二 3:27 PM GMT 说道。
评论18
关于 CSS 的“corner”属性——是的，我大约一年前读过一个关于 CSS3 提案的，我想它本该实现的，尽管我还没检查——据我回忆，它允许你使用完整的或简写的（类似于 border shorthand）代码来为元素的四个角指定图像。你也可以只使用一个角的图片，CSS 会处理它的旋转以适应其他角。我希望浏览器制造商能快点行动起来 :p
Jon B 于 2005年6月7日 星期二 7:38 PM GMT 说道。
评论19
这里应该是 css3-background，而不是 css3-border。css3-border 已经被该文档废弃了...
Anne 于 2005年6月7日 星期二 9:58 PM GMT 说道。
评论20
使用一点 PHP 似乎有一个简单的解决方案。效果是随机背景，我不确定这是否是你想要的效果。请看 http://sonspring.com/index.php?id=77 获取更多详情。该技术扩展了 Automatic Labs 此前的一项技术。
Joan M. Mas 于 2005年6月7日 星期二 10:46 PM GMT 说道。
评论21
我认为 Mozilla 已经有一些专有的 CSS 属性了。至于 CSS 标准，我不确定。这肯定会很酷。
Patrick，试试这个。背景图像/颜色可能会泄露，使它们重新变回方形，值得测试。
至于 CSS3，这是 border-image 的最新工作草案，如果我们能拥有所有那些功能就好了...
与此同时，你也可以试试 Dean 的那个非常酷的 IE7。这是圆角演示。
Tom 于 2005年6月7日 星期二 11:42 PM GMT 说道。
评论22
好的，看来我不应该发布 HTML。这是上面帖子遗漏的链接
Moz: http://www.xulplanet.com/references/elemref/ref_StyleProperties.html
CSS3: http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-image
IE7: http://dean.edwards.name/IE7/
IE7，前后对比测试：http://dean.edwards.name/IE7/compatibility/content.html
Tom 于 2005年6月7日 星期二 11:45 PM GMT 说道。
评论24
Patrick：是的，我的技术（现已更新为支持带 alpha 透明度的 PNG 图像，并使用非侵入性 JavaScript 插入多余的元素：http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/)）使用的图像在计算像素时很大，但这并不一定意味着文件大小会很大。事实上，与下载多个小图片相比，总带宽实际上可以减少。而且服务器请求也更少。不过多余的 HTML 仍然存在。
Roger Johansson 于 2005年6月13日 星期一 2:26 PM GMT 说道。
评论25
无法为一个块级元素应用多个背景图像确实是一个令人沮丧的问题。我认为这是 CSS 中最令人沮丧的事情之一。我迫不及待地等到 CSS3 成为标准，但我担心那将是一个漫长的过程。
RMM 于 2005年7月12日 星期二 10:39 PM GMT 说道。
评论26
用一张图片处理所有角的粗糙方法*...
基于 Roger 的，我想
http://www.elogicom.com/curvy.html 或 http://www.elogicom.com/c/sp/
* IE 在某个地方的颜色显示不对
Chris Neale 于 2005年9月28日 星期三 10:08 AM GMT 说道。
评论29
Mozilla 的方式就像 CSS3 一样不受支持。
可以这样做。
<div id="box">
<img src="top.jpg" width=100%>
bla bla bla
<img src="bottom.jpg" width=100%>
</div>
这使得当盒子变大时，圆角半径变得更圆。
这是 Firefox 的方法。
http://sitemeterreview.blogspot.com/
哎呀，在其他浏览器里很难看。:(
gaby de wilde 于 2005年10月8日 星期六 10:32 AM GMT 说道。
评论31
...这是一种非常混乱的技术。为什么不直接
[ul]
[li] [a href="#"] 链接 1 [/a] [/li]
[li] [a href="#"] 链接 2 [/a] [/li]
[li] [a href="#"] 链接 2 [/a] [/li]
[/ul]
以及 CSS
div { background: url(...) top left no-repeat; }
div ul { background: url(...) top right no-repeat; }
div ul li {background: url(...) bottom left no-repeat; }
div ul li a {background: url(...) bottom right no-repeat; }
更简洁，更简单；尽情享受 :)
Boris Cherny 于 2005年11月25日 星期五 6:25 AM GMT 说道。
评论33
不幸的是，这两种方法都不能让我满意（至少对我个人而言）。用不必要的 HTML 标签来充斥会破坏 HTML/HTML/XHTML 文档的逻辑结构。有时我会牺牲图形来使文档的标签结构更具逻辑性。
Cowboy Marlboro 于 2005年12月2日 星期五 12:13 PM GMT 说道。
评论1
不错的文章 - 只是少了一个...
bavel 于 2005年6月7日 星期二 8:38 AM GMT 说道。