简单的滑块-CSS背景图像与，以获得类似srcset的响应行为和可访问性？

Question

[我知道<img />与background-image()的主题已被广泛讨论，但是我对此有一个疑问。

我的页面上有一个全尺寸的滑块。它在后台显示高分辨率图像，但它们不是语义内容的一部分，而只是设计。我想保持图像清晰，但又不要阻塞流量。

[我喜欢srcset功能，这将是完成这项工作的好工具，但这将要求我使用<img />标记或类似标记。另一方面，我可以坚持使用CSS的background-image()并使用@media解决方法（不幸的是，image-set()还不是标准）。 （在这种情况下，我想避免使用Javascript。）>

这两种解决方案都有其缺点。 他们每个人如何权衡可访问性和语义方面？

此项目的目标之一是使标记尽可能精简和结构化。因此，类似：

<h1>Welcome to Thiswebsite!</h1>
<p>We do lots of exciting stuff here.</p>
<ul class="slider">
    <li>
        <h2>Travel & Lifestyle</h2>
        <p>This is slide 1. Lorem ipsum text and into. <a href="link">Find out more.</a></p>
    </li>
    <li>
        <h2>Sodomy</h2>
        <p>This is slide 2. Wait what? Also info and intro. <a href="link">Spank me.</a></p>
    </li>
</ul>
...即使显示为纯文本也不是太差。但是，将图像放在其中会使导航变得很尴尬。这是一个附带条件的案例，但确实让我考虑了布局元素的正确方法。

请让我知道所提供的信息是否足够。谢谢。

我知道vs background-image（）的主题已被广泛讨论，但是我对此有一个疑问。我的页面上有一个全尺寸的滑块。它展示了高...

Answer 1

CSS非常好。