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-tag？并检查图像的网址是否正确。 / images / ...将引用根级别的目录。 ./images / ...将引用与css文件处于同一级别的目录，而../ images / ...将引用与css目录相同级别的目录。

Answer 2

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

<img id="photo" class="photo-frame">中发生的事情是没有src属性，因此img标记无效。然后检查url是否相对于样式表的位置而不是html页面的位置。这是一个常见的错误

Answer 3

尝试从相框类的!important中删除第background-color个属性，并在外部CSS中将!important添加到background的{{1}}属性中，并同时使用#photo标签而不是div标签。

CSS样式不使用background-image在外部文件中工作

3 个答案: