Question

我正在构建一个库，虽然我的所有代码在Dreamweaver中运行良好，但当我将完成的产品上传到我的网站时，只有大约一半的图像显示出来。我在Chrome和Internet Explorer上检查了该网站，并让其他人检查它是否只是我的PC。

使用以下代码将图像作为背景图像加载：

.birdzoom {
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

#bird01 { 
    background-image: url(../images/thumbs/001.jpg); 
}

并显示以下代码：

<div class="col-sm-2 imgbox">
    <div class="thumb bird birdzoom" id="bird01">
    <div class="link" onclick="openModal();currentSlide(1)"></div>
        <div class="tags"><a href="purchase.html"><span class="glyphicon glyphicon-tag"></span></a></div>
    </div>
    <div class="birdname">Name</div>
</div>

前18张图片显示正常，我检查了四倍以确保所有图片都使用相同的代码。

有问题的网站是http://birdbrained.waywardstudios.net/

Answer 1

在样式表中

<link href="css/style.css" rel="stylesheet">

...

    #bird01 {
        background-image: url(../images/thumbs/001.jpg);
        background-repeat:no-repeat;
        background-size:cover;
    }

    #bird02 {
        background-image: url(../images/thumbs/002.jpg);
        background-repeat:no-repeat;
        background-size:cover;
    }

    ...

**you have not set the bird19 to bird58**
#bird19 {
        background-image: url(../images/thumbs/019.jpg);
   ...

**您只将图片1设置为18 **

网站部分加载背景图像（Bootstrap）

1 个答案: