css - 从 html/css 预览时图像不显示

Question

我遇到了一个问题，我的 css 无法加载我的最后两张图片

top-row background-image: url(../images/top-bg.png) top left repeat-x; width:100%;

top-bg background-image: url(../images/top-row-bg.png) top center no-repeat; width:100%;

Answer 1

对于 IE

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');

用这个

background-image: #000 url(myBackground.jpg) center center fixed no-repeat;

火狐

-moz-background-image: #000 url(myBackground.jpg) center center fixed no-repeat;

用于 safari 或 chrome

-webkit-background-image: #000 url(myBackground.jpg) center center fixed no-repeat;

Answer 2

几点注意事项：

• 您的 CSS 规则似乎不正确。它应该以点为前缀，否则它假定您有一个被调用的 DOM 元素<top-row>，<top-bg>这不太可能
• 您在 url 中指定的图像位置必须相对于 CSS 文件的位置。

所以：

.top-row {
    background-image: url(../images/top-bg.png) top left repeat-x;
    width:100%;
}

.top-bg {
    background-image: url(../images/top-row-bg.png) top center no-repeat;
    width:100%;
}

例如，如果此 CSS 位于/styles/main.css图像中，则必须位于/images/top-bg.png和中/images/top-row-bg.png。确保是这种情况。

此外，我强烈建议您使用诸如 FireBug 或 Chrome 开发者工具栏之类的调试工具，它允许您检查 DOM 和应用于元素的确切 CSS 规则。它还允许您检查网络流量，如果您在引用静态资源时出错，您将收到 404 错误。