Question

shadow_div中的背景图像未按预期显示。虽然其他图像正在加载并且正确显示在mySlider div中但是shadow_div的背景图像怎么样？

<!DOCTYPE html>
<html>
<head>

<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function () {


    });

</script>

<style type="text/css">

    .mySlider
    {
        width:800px;
        height:480px;
        overflow:hidden;
        margin:10px auto;
    }

    .shadow_div
    {
        background-image:url(Images\shadow.png);
        background-repeat:no-repeat;
        background-position:top;
        width:510px;
        height:296px;
        margin:-90px auto;

    }

</style>
</head>

<body>
<div id="my_image_slider" class="mySlider">
        <img src="Images\audi.jpg" alt="" title="Audi India"/>
        <img src="Images\bmw.jpg" alt="" title="BMW India" />
        <img src="Images\aston-martin.jpg" alt="" title="Aston-Martin APAC" />
        <img src="Images\bugatti.jpg" alt="" title="Buggatti APAC" />
        <img src="Images\koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div><br />
<div class="shadow_div" ></div>
</body>
</html>

Answer 1

您正在使用反斜杠 \符号。

<img src="Images\audi.jpg" alt="" title="Audi India"/>

您应该使用正斜杠 /符号。还要确保图像路径正确。

<img src="Images/audi.jpg" alt="" title="Audi India"/>

您可以在此处看到班级.shadow_div中的图片正在显示。请参阅 DEMO 。

Answer 2

您的图片无法获得正确的路径：请尝试以下操作，因为您正在使用正斜杠＆＃39; \＆＃39; 而不是反斜杠＆＃39; /＆＃39;

    <img src="Images/audi.jpg" alt="" title="Audi India"/>
    <img src="Image/bmw.jpg" alt="" title="BMW India" />
    <img src="Image/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
    <img src="Image/bugatti.jpg" alt="" title="Buggatti APAC" />
    <img src="Image/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />

背景图像没有出现

2 个答案: