CSS样式在使用背景图像的外部文件中不起作用

Question

我正在使用媒体查询，因此我将图像从外部 css 文件传递​​到 html 页面，但样式只有在我直接从 html 文件而非外部 css 文件调用图像时才有效。

HTML code:
<img id="photo" class="photo-frame">

External css code:
#photo {
    background: url('/images/example-photo.jpg') no-repeat;
    width: 200px;
    height: 200px;
}

.photo-frame {
    float: left;
    padding: 10px 10px 30px 10px;
    background-color: #fff !important;
    box-shadow: 2px 2px 3px #aaa;
    transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
}

所以这是为了让照片看起来像一张向一侧倾斜的宝丽来照片，我遇到的问题是边框没有显示白色，而只是显示边框开始位置的一条线。当我从 HTML 页面引用照片并调用相框类时，它工作正常，但当我应用 id 并从外部传递图像时，它工作正常。

Answer 1

使用<div id="photo" class="photo-frame">

<img id="photo" class="photo-frame"> 发生了什么有没有src属性使 img 标签无效。其次检查 url 是否相对于样式表的位置而不是 html 页面的位置。这是一个常见的错误