Dropshadow没有出现在background-image div上

时间:2015-06-13 21:49:29

标签: html css css3

我的投影问题没有显示在我的标题上,而且我不确定它是否与我的背景图片标记有关或与div中的某些事情有关。它主要是我的头部部分在顶部包围的homeheader div,下面的阴影不显示。这是标题的css;

#homeheader {
    text-align: center;
    font-family: 'Lato';
    color: white;
    width: 100%;
    height: 380px;
    background-image: url(http://i.imgur.com/zJv1pxt.jpg);
    -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
    -moz-box-shadow:    0px 3px 5px rgba(100, 100, 100, 0.49);
    box-shadow:         0px 3px 5px rgba(100, 100, 100, 0.49);
}

webkit-box-shadow,moz-box-shadow和box-shadow似乎对div没有任何影响,我似乎无法找到原因。

我对编码仍然很陌生,所以感谢任何帮助过的人!

编辑:HTML;

<div id="homeheader">
            </br>
            <!--Nav Bar @ top right-->
            <div id="navcontainer"> 
                <ul>
                    <li><a href="home.html">Home</a></li>


                    <li><a href="Portfolio.html">Portfolio</a></li>


                    <li><a href="About.html">About</a></li>


                    <li><a href="#">Resume</a></li> <!-- Need to direct -->


                    <li><a href="#" class="myButton">Contact</a></li> <!-- Need to direct -->
                </ul>
            </div>

            </br></br></br></br>

            <!--Main Header/Title-->
            <h1 class="name"> My Name</h1>
            <h4 class="description">Amateur HTML/CSS/JS Dev</h4>

            <!--Two Buttons Below-->
            <a href="#" class="myButton">Contact</a>
            <a href="#" class="myButton">Resume</a>

            </br></br></br></br></br></br>

            <!--Down arrow button-->
            <a data-scroll href="#content"><img src="http://i.imgur.com/DaSBdv5.png" align="center" width="32"></a>       
        </div>

1 个答案:

答案 0 :(得分:0)

background-image属性格式不正确。它应该是:

#homeheader {
text-align: center;
font-family: 'Lato';
color: white;
width: 100%;
height: 380px;
background-image: url('http://i.imgur.com/zJv1pxt.jpg');
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
-moz-box-shadow:    0px 3px 5px rgba(100, 100, 100, 0.49);
box-shadow:         0px 3px 5px rgba(100, 100, 100, 0.49);
}

请参阅以下W3Schools rerence http://www.w3schools.com/cssref/pr_background-image.asp