Question

我想将透明光图像放在背景色上以获得良好效果

我不知道为什么光图像没有显示

我所做的：

    <!DOCTYPE html>
<html>

<head>

<meta charset=utf-8>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">

</head>
<body>

 <script src="js/jquery.js"></script>
  <script src="js/carousel.js"></script>
<div id="carousel">


</div>

</body>
</html>

css：

#carousel
{
border:solid 1px #1a1a1a;
position:relative;

width:922px;
height:221px;
margin:0 auto;
margin-top: 50px;
display: block;
background-image:url(light.jpg);
}
body
{
    background-color: #c7c7c7;

}

Answer 1

正如我所说in the comments，你的外部“加载”图片没有出现在你的小提琴中的原因是因为external resources are only for loading css or javascript files。

事实上，在检查所包含的iframe的来源时，这一点变得很明显：

Image included as js file

由于图像作为javascript文件包含在页面中。如果类型未知（例如，不是css或javascript），则文件将作为javascript加载，如之前链接的文档中所述。

为了正确加载这样的图像，您需要在小提琴的实际css中提供完整的URL。例如：

#carousel
{
    border:solid 1px #1a1a1a;
    position:relative;

    width:922px;
    height:221px;
    margin:0 auto;
    margin-top: 50px;
    display: block;
    background-image:url('http://s4.postimg.org/590qvkilp/light.png');
}

DEMO

Answer 2

您包含的外部资源是从其他网站 s4.postimg.org/590qvkilp/light.png

加载的

Screenshot from Chrome

由于图片不在相同位置，因此您需要包含该完整位置。

background-image: url(http://s4.postimg.org/590qvkilp/light.png);

DEMO 此处

为什么图像无法显示

2 个答案: