Question

在我的网站上，我声明了.menu标记。要在CSS中设置样式，我使用了

    .menu {
        background:url('images/menu.svg');
        background-repeat: no-repeat;
        background-size:cover;
        background-position:center center;
        height:50px;
        width:50px;
        position:absolute;
        top:7px;
        left:7px;
        transition: all .5s cubic-bezier(.67,.99,.48,.96);
        z-index:2000;
    }

我期待menu.svg出现。但事实并非如此。为什么？ PS我也试过background-image。

Answer 1

常见的原因是您没有指向menu.svg的正确位置要么是因为css和图像在不同的locatins中，要么文件名不正确。

我倾向于认为menu.svg不在css文件的文件夹下（如果这是一个外部css文件）。

使用Chrome开发者工具（F12）

在源选项卡中更改css类的属性
检查网络选项卡，查看menu.svg的响应代码是否正常。

Answer 2

如果css文件和图像位于不同文件夹中，则必须执行此代码

.menu {
    background:url('../images/menu.svg');

    background-repeat: no-repeat;
    background-size:cover;
    background-position:center center;
    height:50px;
    width:50px;
    position:absolute;
    top:7px;
    left:7px;
    transition: all .5s cubic-bezier(.67,.99,.48,.96);
    z-index:2000;
}

Answer 3

您是在本地测试（例如，关闭您的文件系统）还是在测试真实的Web服务器？

如果是后者，并且您确定您的URL是正确的，请检查您的Web服务器是否返回了具有正确MIME类型（ContentType）的menu.svg。您可以查看浏览器开发工具的网络选项卡（F12）进行检查。

对于SVG，MIME类型应为image/svg+xml。如果不是，则需要调整Web服务器的配置。

后台属性不起作用CSS3

3 个答案: