如何在 HTML 中的图像标签内包含一个分区？答案

【问题标题】：How to include a division inside a image tag in HTML?如何在 HTML 中的图像标签内包含一个分区？
【发布时间】：2014-02-21 18:27:32
【问题描述】：

我正在完成一个项目。我已经编写了很多行 CSS 代码，将图像添加到类/ID 意味着编辑我编写的大量代码。如果在HTML 的图像标签内添加除法会更好。

因此我的问题是：如何在HTML 的图像标签中包含一个分割？

伪选择器可能对我有用，但我该如何使用伪选择器呢？

如果您无法解决，请查看我使用不同方法的链接：

【问题讨论】：

您需要支持哪些浏览器？你可以使用伪选择器吗？ (>=IE8)caniuse.com/#search=before
我需要支持 IE、opera、safari、google chrome 和所有触控移动设备，这是 wordpress 的主题，因此我不能在浏览器支持上妥协
你需要支持的IE最低版本是多少？
不可能将子元素添加到图像标签，因为它是自闭合的。如果您可以使用伪选择器，您就可以避免重写大量代码的痛苦。就目前而言，您无法避免此问题。也许发布一张想要的效果和你目前拥有的图片，看看是否有人对解决这个问题有任何想法？
@user3274745 我仍然不清楚您想要实现什么或最终标记需要什么样的外观才能与您的 jQuery 函数一起使用。图像作为替换的内联元素不能有任何子元素。 “伪选择器”是什么意思？您的意思是“伪类”及其选择器吗？如果是这样，我看不出这应该如何帮助你。我的猜测是你很可能犯了一个错误，你必须重写这部分代码。

【解决方案1】：

所以我发布了一个答案。

屏幕/视口宽度为 380 像素及以下的“问题”有几个问题。

在你的外部<div> 和slider-wrapper3 类（它将iPhone 作为背景图像）你应该在你的CSS 中使用以下内容：

.slider-wrapper3 {
   background-size: contain; /* you use cover */
   background-repeat: no-repeat;
   /* keep the rest of your actual code */
}

并至少为您的小屏幕布局移除宽度设置 (width: 310px;)！

通过这样做，您已经固定了容器（以及背景图像）的位置和大小。

所以您仍然需要调整图片尺寸（可能在您的滑块脚本中，或者图片尺寸的来源）。

【讨论】：

22 小时后我会给你赏金
在这里也添加你的答案，我也会在那里给你一个赏金：stackoverflow.com/questions/21853803/…
@user3274745 非常感谢。我很高兴能帮助您解决您的问题。我不是“赏金猎人”;-)。所以我认为如果你发布你自己对另一个问题的答案会更好，描述问题是什么以及你是如何解决它的。您还可以在此处添加指向此问题的链接。然后去那里接受你自己的答案。通过这样做，将来访问该主题的其他用户可能会得到他们正在寻找的答案......！
我按照说明完成了。再次感谢我已经为此工作了一整天。