使用CSS在伪元素上添加声音

Question

9

我读到了一些令人惊讶的内容，想问一下这是否可能。

根据w3school文档，content属性可以采用一个声音的url值？！

url(url) 将内容设置为某种媒体（图像、声音、视频等）

根据MDN所述：

该值是指定外部资源（例如图像）的URI。如果资源或图像无法显示，则会被忽略或出现某个占位符。

所以我尝试了一下

content: url('http://www.w3schools.com/html/horse.ogg');

但是没有任何反应。我的问题是，CSS是否确实可以触发声音效果，还是w3schools文档中存在错误？

编辑：这可能有用的示例：

当然你可以使用JS触发声音，但有些情况下不允许使用javascript或用户未启用javascript。因此，想象一下你向第三方网站提供一个元素，并且只允许使用HTML+CSS（例如横幅），如果content确实接受声音，则可以在伪元素的悬停时触发声音效果。

- Avraam Mavridis

2

即使它能够正常工作，预期的输出会是什么？你该如何控制音频呢？ - noahnu

1

@noahnu 悬停时触发声音效果。 - Avraam Mavridis

2

W3C写道：另一个常见的效果是用图像或其他多媒体内容替换元素。由于并非所有用户代理都支持所有多媒体格式，因此可能需要提供备选方案。 - Nico O

4

众所周知，W3 Schools 的信息不可信且可能不是最新的。请改用 MDN。 - Scott Marcus

@ScottMarcus 或许三年前还是真的，但现在已经不再是事实，包括您原始的信息来源。 - Rob

显示剩余5条评论

2个回答

2

"

W3C规范的表述略有不同

该值是指定外部资源（如图像）的URI。如果用户代理无法显示该资源，则必须将其排除，就像未指定一样，或者显示某些指示表示该资源无法显示。

没有提到声音...即使可能，也没有指示它将如何显示/声音/激活...而且，目前最好的情况是由浏览器来实现。

因此...可以说W3Schools错了...这并不是第一次。

"

- Paulie_D

"media" 的值为 "all"，而 "all" 的链接在 "媒体类型" 中包括 "声音"：https://www.w3.org/TR/CSS2/media.html#all-media-group - Rob

@Rob不是指你的HTML/CSS所呈现的“媒体”吗？用于@media screen/print等等… - noahnu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oriol · Accepted Answer

CSS2.1规定：

该值是指定外部资源（如图像）的URI。如果用户代理无法显示该资源，则必须将其留空，就好像未指定一样，或者显示某些指示表明无法显示资源。

如果URI可用且支持格式，则元素或伪元素变为替换元素，否则使用逗号分隔列表中的下一项（如果有）。

较新的CSS Generated Content Module Level 3编辑草案（尚不准备实施）基本上说的是同样的内容：

对于除了值的最后一个逗号分隔部分中的URI之外的URI，如果URI可用且支持格式，则元素或伪元素成为替换元素，否则使用逗号分隔列表中的下一项（如果有）。

因此，浏览器可能会决定支持声音并将其呈现为替换元素，例如<audio>。但最有可能的是，它们不会这样做。