javascript - 帮忙看下这段css有什么问题吗~为什么图片加载不出来！

问题描述

问 题

<style type="text/css">
    * {
        margin: 0 auto;
        padding: 0;
    }
    
    .dn {
        display: none
    }
    
    img {
        width: 100%;
        height: auto
    }
    
    body {
        background-color: #17c6a0
    }
    
    .content,
    .mywrap * {
        position: relative;
    }
    
    .con1 {
        background: url(https://img.alicdn.com/imgextra/i3/2685309844/TB2dVrycC8mpuFjSZFMXXaxpVXa_!!2685309844.jpg) no-repeat scroll center top /100% auto;
        padding-top: 123%
    }
    
    .con2 {
        background: url(https://img.alicdn.com/imgextra/i3/2685309844/TB2DN1Bc.hnpuFjSZFPXXb_4XXa_!!2685309844.jpg) no-repeat scroll center top /100% auto;
        padding-top: 64%
    }
    
    .con3 {
        background: url(https://img.alicdn.com/imgextra/i1/2685309844/TB2CBy8b90jpuFjy0FlXXc0bpXa_!!2685309844.jpg) no-repeat scroll center top /100% auto;
        padding-top: 88%;
        background-color: #17c6a0
    }
    
    .con4 {
        background: url(http://pic6.qiyipic.com/common/20161020/ONEDAY1020IMG_03.jpg) no-repeat scroll center top /100% auto;
        padding-top: 71%
        

    }
    
    .con3>div {
        position: absolute;
        top: 0%;
        width: 90%;
        left: 5%;
        overflow: hidden;
    }
    
    .con3>div h2 {
        color: #fff;
        font-size: 1.6em;
        margin-top: 10%
    }
    
    .con3>div p,
    .con3>div h3 {
        width: 92%;
        padding-left: 5%;
        padding-top: 6%;
        font-family: FangSong;
        color: black;
        font-size: 0.8em;
        font-size: 16px;
    }
    
    .con3>div h3 a {
        color: #166dff
    }
    
    .con4 ul {
        position: absolute;
        top: 15%;
        list-style: none;
        text-align: center;
    }
    
    .con4 ul li {
        display: inline-block;
        width: 26%;
        margin: 0%;
        margin-left: 3%;
        margin-top: 6%;
    }
    
    .con4 ul li:first-child,
    .con4 ul li:nth-child(4) {
        margin-left: 0%
    }
    
    .con4 ul li img {
        width: 100%;
        height: auto
    }
    
    .con2 a {
        display: block;
        position: absolute;
        top: 76%;
        left: 11%;
        width: 75%;
        height: 18%;
    }
    
    .con23 {
        background: url(http://pic5.qiyipic.com/common/20160926/60YUAN0922H5IMG_06.jpg) no-repeat scroll center top /100% auto;
        padding-top: 64%
    }
    
    .con23 a {
        display: block;
        position: absolute;
        top: 76%;
        left: 11%;
        width: 75%;
        height: 18%;
    }
    
    .con22 {
        background: url(http://pic2.qiyipic.com/common/20161215/3VIP-1215IMG2.jpg) no-repeat scroll center top /100% 100%;
        padding-top: 35%;
        position: relative
    }
    
    .con22 #phone {
        position: absolute;
    display: block;
    top: 17%;
    height: 2.6em;
    background-color: #f4f4f4;
    left: 20%;
    border: 2px solid #46cac4;
    padding-left: 8%;
    color: #797579;
    width: 52%;
    font-weight: bold;
    font-family: "微软雅黑";
    }
    
    .con22 #keyCode {
        position: absolute;
        display: block;
        top: 47%;
        height: 2.4em;
        background-color: #f4f4f4;
        left: 9%;
        border: 2px solid #46cac4;
        padding-left: 8%;
        color: #797579;
        width: 44%;
        font-weight: bold;
        font-family: "微软雅黑";
    }
    
    .con22 img {
        position: absolute;
        display: block;
        top: 47%;
        height: 2.4em;
        background-color: #f4f4f4;
        left: 63%;
        border: 2px solid #46cac4;
        padding-left: 0%;
        color: #797579;
        width: 28%;
        font-weight: bold;
        font-family: "微软雅黑";
    }
    
    .con22 .btn_ljlq {
        position: absolute;
    top: 60%;
    height: 32%;
    display: block;
    left: 30%;
    width: 40%;
    background: url(http://pic2.qiyipic.com/common/20161028/3daycon22btn_lq.png) no-repeat scroll center top/100% 100%;
    }
    
    .whh-warn {
        position: fixed!important;
        opacity: 1;
        background: rgba(255, 255, 255, 0.8);
        font-family: "微软雅黑";
        border: 1px solid #46cac4;
        max-width: 70%;
        width: 60%;
        top: 35%!important;
    }
    
    .whh-warn .warn-sure {
        background-color: #46cac4;
    }
    
    .whh-warn .warn-title {
        white-space: normal;
    }
    
    .cover-fix,
    .cover-fixed {
        position: fixed!important;
        top: 0;
        right: 0;
        width: 100%;
        bottom: -80px;
        left: 0;
        z-index: 998;
        background-color: rgba(0, 0, 0, 0.4);
        height: 100%;
        padding-top: 200%;
    }
    
    .whh-warn .warn-again {
        text-align: center;
        font-size: 18px;
        line-height: 25px;
    }
    
    .whh-warn .warn-close {
        display: inline-block;
        color: #666;
        width: 20px;
        height: 20px;
        border: 1px solid #666;
        border-radius: 15px;
        text-align: center;
        line-height: 20px;
        position: absolute;
        right: 2px;
        top: 2px;
    }
    
    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {
        /* 兼容iphone5 */
        .con3>div p {
            font-size: 0.8em;
            line-height: 1.5em
        }
        .con3>div p,
        .con3>div h3 {}
        .con2 .tip {
            font-size: 0.4em!important
        }
    }
    
    @media (device-height:667px) and (-webkit-min-device-pixel-ratio:2) {
        /* 兼容iphone6 */
        .con3>div p {
            font-size: 1em;
            line-height: 1.4em
        }
    }
    
    @media (device-height:736px) and (-webkit-min-device-pixel-ratio:2) {
        /* 兼容iphone6 Plus */
        .con2 .tip {
            font-size: 1.1em!important
        }
        .con3>div p {
            font-size: 1em;
            line-height: 1.4em
        }
    }
</style>

里面con2跟con4的 图片在服务器上加载不出来,在本地就可以,是怎么回事呢,新手不太懂。。

这个问题已被关闭，原因：问题质量差 - 问题太水、伸手党

解决方案

谢邀，手机答题。
出问题的图片貌似都在阿里CDN上，如果本地能看到的话，说明资源本身和代码应该问题不大，建议你先看下开发者工具里网络报的是什么代码、有没有跨域报错等等，另外建议把网页改个名再访问下，以排除缓存的问题。

这篇关于javascript - 帮忙看下这段css有什么问题吗~为什么图片加载不出来！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！