将div与另一个div上的图片

Question

我想在右侧的菜单上显示图像，但是在Windows 10的IE和Microsoft Edge上不起作用。

<div class="menuDiv">
        <ul id="menu">
            <div class="menu_image"></div>
            <li><a><img src="img/image_1.png"></a>
                <ul id="seccion_1"></ul>
            </li>
            <li><a><img src="img/report_image.png"></a>
                <ul id="seccion_2"></ul>
            </li>
        </ul>
    </div>

menuDiv使用jqueryUI的themeRoller菜单

.menu_image
{
    right: 0px;
    position: absolute;
        content: url(../../../../../lib/img/image_logo.png);
        background-repeat: no-repeat;
/*        background-position: 98% 0%;*/
        width: auto;
        height: auto;
}

这就是在Chrome和Firefox上的外观

这是在IE上的样子

如何在IE上显示图像？

我在jsfiddle上设置了类似的示例

https://jsfiddle.net/kzxfu7j4/

Answer 1

加

.menu{
   display: relative;
}

到您的CSS或更改您的.menu_image，如下所示：

.menu_image
{
        content: url(../../../../../lib/img/image_logo.png);
        background-repeat: no-repeat;
/*        background-position: 98% 0%;*/
        width: auto;
        height: auto;
        float:right;
}

编辑：通过确保div具有适当的高度和宽度，您可以简单地更改其高度和宽度以匹配图像的高度和宽度。

Answer 2

尝试这个 ：

.menu_image
{
        position: absolute; z-index: 9999;   
        content: url(../../../../../lib/img/image_logo.png);
        background-repeat: no-repeat;
        width: auto;
        height: auto;
        float:right;
}

如果那行不通，也许是问题的“内容”

Answer 3

我找到了一个解决方案，我只在类menu_image上设置了“：before”即可工作

.menu_image:before
{
    right: 0px;
    position: absolute;
        content: url(../../../../../lib/img/image_logo.png);
        background-repeat: no-repeat;
/*        background-position: 98% 0%;*/
        width: auto;
        height: auto;
}

Answer 4

问题是您的content CSS属性。 仅当应用于psudo-elements的::before或::after时才有效：

https://developer.mozilla.org/en/docs/Web/CSS/content

您有两种选择：

1）如果图像在内容上下文中很重要（因此，您绝对希望所有用户都可以看到它），只需在标记中添加<img> 。

另外，由于您要使用绝对定位来定位图像，所以相对于放置空div元素并将图像设置为背景，对我来说更有意义的是添加实际的<img>标签并直接定位它们。

如果图像表示导航按钮，请使用此方法1。

2）如果图像对内容上下文不重要，则可以使用以下常规方法将其添加为背景图像：

background-image:url(...);

https://jsfiddle.net/rwhxpmfm/

背景图像存在可访问性问题（例如，当网页打印在纸上并且屏幕阅读器无法访问它们时，它们不包括在内……但是屏幕阅读器可以访问<img>元素的alt属性），因此仅当它仅用于装饰，而不是内容上下文的一部分。