最近有人问我关于这种技术的问题,我第一反应是这可能过于平凡,不值得作为教程讲解。但随后我开始思考,这里实际上有一些有趣的地方,而且这种风格足够流行,人们可能会有兴趣。
这个想法只是将一些文字覆盖在图像之上,但作为从左侧突出显示的块,在可变长度文字周围均匀地添加填充。这里有一个截图示例
示意图
HTML
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
将图像作为包装 div 的背景图像会更容易,但在这种情况下,我认为图像属于内容,因此应该放在 HTML 中。我们将使用该包装 div 作为绝对定位的容器。
CSS
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
这将使我们的文字很好地叠放在图像之上,但它没有实现我们想要在文字后面实现的透明黑色框。为此,我们不能使用h2,因为它是块级元素,我们需要一个没有特定宽度的内联元素。
让我们将内部h2包装在一个 span 中
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
使用该 span 来设置文字和背景的样式
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
问题
当内联元素换行时,块会在行的最后一个字符后立即换行,并在下一行立即从左端开始。在这种情况下,填充无济于事。
为了解决这个问题,我们将在线段的任一侧应用更多 span 来模拟该填充。<br />元素以模拟填充。
<h2><span>A Movie in the Park:<span class='spacer'></span><br /><span class='spacer'></span>Kung Fu Panda</span></h2>
我们将使用这些新的 span 来应用填充
h2 span.spacer {
padding:0 5px;
}
修复语义
此时,设计已完成,但出于设计原因添加了许多额外的 HTML 元素。即所有这些 span。jQuery 可以介入并帮助我们。只需从标记中删除所有 span,并像这样动态地应用它们
$(function() {
$("h2")
.wrapInner("<span>")
$("h2 br")
.before("<span class='spacer'>")
.after("<span class='spacer'>");
});
感谢 rgba 的内容。以前不知道有这个。
也许将来可以讲解一些不常用但很有用的 CSS 属性。
rgba 的内容只在 Firefox、Safari 和 Chrome 中有效。你能猜到哪个浏览器中无效吗?IE。甚至版本 8 也无效。令人沮丧的现状。
还有什么新东西?;D
这就是备用颜色存在的理由 - 因此在不支持 rgba 的情况下会使用纯色。虽然不那么美观,但总比没有好。我认为这是大多数人在处理 CSS3 和 IE 时采用的方法。
他实际上在一个屏幕录像中讲解过 rgba,我记得是那个关于 CSS3 的屏幕录像。
我很久以前就在这里做过类似的事情(www.qualityreglaze.com)。但是没有使用透明度。干得好!
顺便说一句,IE7 和 Opera 中的 DEMO 显示的是纯黑色背景,没有透明度。而在 Firefox 和 Flock 中,背景重叠,在两者之间创建一条黑线。
如果你想让 IE7/Opera 中的透明度生效,可以像 这个演示 中那样,使用纯色透明 PNG 设置背景。下载部分有一个完整的 PNG 包。
酷!感谢链接。
重叠问题怎么办?
然后还有(咳咳…)IE6 问题。我知道,我说出来了,亵渎神灵。很棒的内容,我假设这可以添加到 WP 和 jQuery 画廊中?关于这方面的教程会非常棒。感谢。
这种方法跨浏览器兼容吗?
感谢 Chris,你真是太棒了!
在 Safari 4 中,间隔符背景叠放在主 span 上,使其变暗。
我认为需要将其重置为不应用 rgba 值。
我和 Joel 有类似的线段问题,背景也会重叠。
啊,是啊,Safari 处理这种方式 (rgba 重叠) 很有趣。我认为这可能是正确的方式。但无论如何,这是另一个需要关注的跨浏览器问题。
你可以调整行高来修复重叠的行。在我的浏览器中看起来很好,但它可能需要处理略微不同的本地 Helvetica 版本。
嘿,jQuery 功能怎么样?我从来没有弄明白,很有趣,它不需要在最终的 HTML 文档中添加额外的 HTML 代码。还是我错了?
Chris,在 span 上使用内联块可以解决填充问题吗?我还没有测试过,但这是我的第一个想法。
嘿 Chris - 像往常一样,酷炫的文章!
只是想问问 jQuery (哈哈哈哈哈…嗯) - 这会不会影响页面上的所有 h2 标签?我对 jQuery 不太了解,所以我可能错过了什么…
这只是一个示例。当然,你应该更改选择器以适应你的需求…
你不能直接使用 ‘& nbsp;’ 来消除 ‘间隔符’ span 吗?
最初我使用的是 span,这样我就可以非常精确地控制间距,但最终我将演示改为使用 span 和 & - 因为 IE 不喜欢空 span (它会将其折叠,而不是将填充应用到它上面)。
或者你不能直接在换行符上添加边距吗?
h2 span br { margin: 0 5px; }
当然可以给它一个类…
不错的效果。在 WordPress 上看起来很好。
感谢!那么如何解决动态文字和填充的问题呢?
JavaScript 我看到了。
除非我启用了 JavaScript(在 FF 中),否则我无法看到背景。rgba 需要 js 才能工作吗?
我现在在想,既然你使用 js 来使你的代码更有语义,那么是否最好完全删除 image div 和 h2,并通过 js 添加它们?也许可以从图像的 alt 属性中创建 h2...
很酷的东西。我是在鼠标悬停时这样做,而不是让标题立即显示出来。最初我会使用 display:hidden,然后使用 :hover 触发 display: block,这样文本就会显示出来。好文章。继续努力,克里斯。
display:none 而不是 display:hidden。抱歉。
如果你要添加额外的标记(我认为即使是 'br' 也是额外的标记),为什么不直接使用两个 span 元素 - 一个围绕“电影在公园:”和一个围绕“功夫熊猫”。
然后你可以根据需要定位它们,但最简单的方法就是通过浮动它们。
查看 http://www.thinktherefore.co.uk/tests/text-blocks-over-image 了解示例。
我喜欢这个。我看到的唯一问题是,你几乎必须在标记中包含这些 span,而不能动态附加它们。除非你变得非常花哨,想出某种“分割”字符,你可以用 JavaScript 解析出来,它将表示一个 span 结束和另一个 span 开始的位置。
好吧,如果你已经在标记中强制使用 'br',那么你可以说几个 span 没什么大不了的。你使用的示例暗示了一种“子标题”,这可以证明将文本分成两个元素是合理的。
你的“分割”字符的想法是完全可行的(你甚至可以使用 tab,它默认情况下只会渲染为空格),但我真的不喜欢使用 JavaScript 来实现纯粹的样式目标,并且会尽一切努力避免它。
我原本想建议同样的内容。我最近不得不尝试为一个客户实现这一点作为悬停样式,它工作得很好,直到由于长度,行自己断开/换行。
我找到的唯一解决方案是“知道”或明确信任断点。如果你知道它们应该出现在哪里,并且该长度永远不会导致元素自己换行,那么这可以很好地工作。
但是,如果你已经知道断点,则将每个断点都包装在带有 display:block 和 float 的 span 中,就可以使用空 span 或断点来实现效果。
我们实际上不得不放弃实施,因为我们使用的内容太动态,无法知道断点将在哪里出现。
我将这个想法进一步发展,正如你和 @Hassan 所说。不幸的是,我不是 jQuery 专家,所以我得到了这个想法
HTML

实际上是一个新行,所以我想它是安全的,据我所知,它在 IE 中看起来很不错;不要误会我的意思,我是一个 Mac 用户,我无法测试 :D
JavaScript
$(function(){
$("img.text-block").wrap("");
$("div.image").append("");
$.each($("div.image img.text-block").attr("alt").split("\n"), function(){
$("div.image h2").append("" + this + "</span");
});
});
如果有任何人愿意清理这个烂摊子(我相信有很多空间可以做到),请告诉我你的版本。
这是一篇有趣的文章,我必须承认我一直很喜欢图像上方的标签。
非常感谢你发布它。
干杯,
Vlad
我昨天才发布了它 - 我为 jQuery 写了一个图像覆盖插件,它使用了类似的技术,但在更动态的方式中。在这里查看:http://www.ferretarmy.com/files/jQuery/ImageOverlay/ImageOverlay.html
非常酷 Jon!我也在考虑将这个插件化,可能用于屏幕录制。不是试图竞争或任何东西 =) - 只是觉得这是一个解释插件创建概念的好例子。
我真的很喜欢看到这个
嗨 Jon,太棒了。我也在想类似的事情。你给了我现成的输出。非常感谢。
怎么样
/* 针对 IE */
filter:alpha(opacity=60);
/* CSS3 标准 */
opacity:0.6;
Filter 在 IE7/8 中有效,CSS3 Opacity 标准在所有其他浏览器中有效,包括 Opera 10。你可以轻松地将透明度应用于图像和背景颜色。事实上,W3 有一个非常简单的基本教程(我从那里获得了上面的内容),并概述了如何使用两者
https://w3schools.org.cn/Css/css_image_transparency.asp
这并不理想,因为它也会使文本变得透明。
(rgba) 是标准吗?
是否可以使整个 div(它有一个作为 bg 的图像)看起来相对于 body 标签的背景图像透明?
这就是我所拥有的
body {
background:url(IMG/site/clouds.jpg) no-repeat;
……
}
#main-content {
background:url(IMG/site/trans.jpg) repeat-x bottom center;
…..
}
当我将“background: rgba(0, 0, 0, 0.7);” 粘贴到 main-content 选择器前面时,没有任何效果。有什么想法吗?
我确信“background: rgba(0, 0, 0, 0.7)” 实际上并没有使 div 变为透明,而是指定了一个透明的背景颜色。
所以你需要要么将 trans.jpg 变成一个透明的 .png,要么将“opacity:0.7;” 添加到 #maincontent。但是,这两个在 IE 中都有问题(参见上面的 Billy White 的评论)
我真的很喜欢文本块覆盖图像的外观。看起来很干净。
非常酷。我喜欢它的外观和设计。
非常有用。谢谢。
我将此技术用于地图。如果你希望地图图例可点击,将地图图像(仅包含轮廓,不包含图例)作为相对 div 的背景,并在 div 中放置一个无序列表。ul 包含所有地图点和城市。每个列表项应该有一个 id 并绝对定位。例如:如果你有一张美国地图,将列表项西雅图的 5px 置于顶部和左侧,波士顿的 5px 置于顶部,200 px 置于左侧……
类似的东西不应该适用于 IE666 透明度吗?
哈哈!一篇真正的 CSS 文章!不错。
这是否可以通过设置重叠文本的 z-index 来实现,而不使用 JavaScript?
如何使文本叠加的宽度与它所在的 div 相同,因为 span 是内联元素?
有什么想法吗?
那就根本不要使用 span,以 span 的方式设置 h2 的样式。使用 span 的原因是不要让它们拉伸整个宽度。
克里斯,非常感谢你对此事的回复。
我之前尝试过的方法有点类似,但我无法让背景包裹在文本周围。期待我很快发布博文,分享链接。
嘿,克里斯,
这是一个很棒的技巧。我大约一年前开始学习网页设计,你的视频教程帮助了我很多。我特别喜欢这个文本覆盖图像的技巧。我相信我会在我的朋友在家里使用它的一些图像上使用它……
谢谢
非常方便。感谢你发布这个。
首先,新的评论东西不错!我知道它没什么大不了的,但我总是很欣赏这些小小的变化,你会注意到它一段时间。
很酷的帖子,虽然不是什么新鲜事,但我一直用这种技术(在相对定位中使用绝对定位)来在缩略图等上添加播放图标,效果很好。
我在想,你也可以使用负边距来达到同样的效果,而且我相当确定所有浏览器对它的反应都一样,并且标记会更少(希望如此),尽管这基本上是一个 hack,当我看到你的帖子时,我就对自己说“绝对定位,当然”。
我在我的网站上成功地实现了这一点,不过方式略有不同。这个版本不使用 jQuery 或 span,但看起来也不完全一样。
http://paradoxdgn.com
注意顶部滚动条中的第二个幻灯片,它显示了一个多行版本。
我所做的唯一更改是将 <h2><span> 替换为单个 <div>,然后稍微调整 CSS 使它能够适应新的更改。
一如既往的好帖子。尽管你说这可能过于基础,但它绝对值得一看,因为我从中学习了几件事,例如使用 jQuery 清理代码,以及带有 alpha 通道的 rgba。
从评论中可以看出,它在 IE 中不起作用,好吧,我不得不说,我震惊了!不!
你好!
我正在尝试使用本教程,但是当我将函数插入我的 functions.php 文件时……当我下次访问我的网站的任何页面时,出现了这个错误。
解析错误:语法错误,意外的 '(',期望 T_VARIABLE 或 '$' 在 /home/another8/public_html/mock-heroic.net/wp-content/themes/thematicpowerblog/functions.php 的第 28 行
我做错了什么?
顺便说一下,我正在尝试将其与 WordPress 一起使用。
我必须说,这真是对 h2 的不恰当使用!它不应该是一个标题,对吗?
我在一篇名为 Captions over images 的博客文章中建议了更具意义的标记。
不错的风格
干得漂亮……谢谢
你好!
我一直想找类似的东西。但我不知道你是否注意到,在演示页面上,两行文字之间有一条黑线。我找不到任何解决它的方法。
有什么想法吗?
此致,
Andor Nagy
您好,
我正在尝试用幻灯片来应用这个技巧……但它在我的页面上不起作用。
http://www.masduprieure.com/test/
标题停留在幻灯片后面。
我不知道如何将标题放到前景?
此致,
Alexandra
我在我的网站上尝试了这个,效果很好。但是,不幸的是,CSS 被应用到了页面上的所有 h2 元素。我需要做些什么才能将其包含在内,并只应用到那个 h2 元素?
谢谢!
为你想更改的 h2 元素添加一个单独的类,例如:当你为
编写 CSS 时,它只会影响那个 h2 元素。
您好 - 我正在尝试做类似的事情,但是我想让图片右对齐,文本框(如果可以的话)左对齐。然后,如果可能的话,我想让文本框跨越容器的宽度。例如,如果容器是 900px,图片的宽度是 600px,那么黑色的透明框将跨越整个 900px 宽度。
抱歉解释太长了 - 有什么建议吗?
谢谢!
有一个关于这方面的问题。我在滑块中将帖子标题拉到特色图片的顶部。我应用了一个类,它通过限制行宽将标题换行成两行。我的 span 元素工作了,但是它存在丑陋的间距问题。由于我无法在 php 中添加更多 span 元素,我该怎么做才能解决这个丑陋的审美问题?
.title {
z-index: 20;
position: relative;
top: 255px;
width: 15em;
margin-top: -85px;
line-height: 1.75;
}
h1 span {
color: #fff;
background: rgb(0, 0, 0); /* 备用颜色 */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
margin: 0px;
}