javascript - 帮忙看下这段css有什么问题吗~为什么图片加载不出来!
本文介绍了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屋!
查看全文