Question

很抱歉发布这个原因我知道答案可能非常简单，但我有一个背景图像的div由于某种原因被切断，我无法弄清楚，为什么？

我尝试使用高度和宽度属性使div大小更大，我尝试移动div并且我也尝试了line-height属性而我什么也没得到。

我一直在研究这个问题，所以我打算在其他事情上工作，同时我希望有人可以看一看并提供帮助，可能会指出我正确的方向。

谢谢！

这是HTML：

<nav>
        <ul id="navUl">
            <li class="navLinks"><a class="taimurknaziri" href="#top"><strong>TAIMUR K NAZIRI</strong></a></li>
        <li class="navLinks">
            <a class="navLinks" href="#projects">Projects</a>
        <!-- START SUB-MENU FOR PROJECTS -->
        <ul class="fallback">
            <li class="navLinks"><a href="#">Websites</a></li>
            <li class="navLinks"><a href="#">API's</a></li>
            <li class="navLinks"><a href="#">Games</a></li>
        </ul>
        <!-- END SUB-MENU FOR PROJECTS -->
        </li>
            <li class="navLinks"><a class="navLinks" href="#about">About</a></li>
            <li class="navLinks"><a class="navLinks" href="#contact">Contact</a></li>
            <li class="navLinks"><a class="navLinks" href="#contact">Blog</a></li>
        </ul>   
    </nav>
    <br>
    <!-- BACKGROUND -->
    <div id="backgroundContainer"><br>
        <div id="titleContainer">
            <img id="tkn" src ="images/tkn.png"> 
        </div> 
    </div>

Herre是CSS：

body,html {
border:0;
margin:0;
padding:0;
height: 100%;
}


/* BEGIN HOME PAGE STYLING */

/* NAVIGATION BAR */
nav {
   background:#ffffff;
   position: fixed;
   float:left;
   width: 100%;
   opacity: 0.8;
}

nav ul {
   text-align:center;

}

nav ul li {
   float:left;
   display:inline;
}

nav ul li:hover {
   color:#000000;
}

nav ul li a {
   font-size: 11pt;
   font-family: Impact;
   text-decoration: none;
   display:block;
   padding:15px 30px;
   color:#6f6f6f;
}

nav ul li ul {
   position: absolute;
   width:110px;
   background:#ffffff;
}

nav ul li ul li {
   width:110px;
}
nav ul li ul li a {
   display:block;
   padding:15px 10px;
   color:#6f6f6f;
}

li:hover a {
   color:#000000;
}

nav ul li ul.fallback {
   display:none;
}

li:hover ul.fallback {
   display:block;
   color:#000000;
}

#navLinksContainer {
   display: inline-block;

   margin-top: 40px;
   margin-right: ;
   margin-bottom: ;
   margin-left: 25px;
}

/* BEGIN BACKGROUND STYLING */
#backgroundContainer {
   line-height: 40px;
   background-image: url("images/nyc_bg.png");
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: 100%;

   max-height: 100%;

   margin-top: 50px;
}

/* TITLE THAT IS FIRST LOADED ON THE PAGE */
#titleContainer {
   display: inline-block;
}

#tkn {
   margin-left: 350px;
   margin-top: 100px;
}

Answer 1

变化：

max-height: 100%;
background-size: 100%;

为：

height: 100%
background-size: cover; /* or background-size: 100% 100%; */

表示#backgroundContainer。

http://jsfiddle.net/hr9G9/

这里有两个问题。背景大小和最大高度都使用父div的百分比。背景大小也接受两个值 - 第一个是宽度，第二个是高度。如果未设置第二个高度，则默认为auto，这不是您要查找的内容。将最大高度更改为高度时将背景大小值设置为100％可以解决所有问题。

背景DIV被切断

1 个答案: