背景大小封面不工作

HTML：背景大小封面不工作

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <link href="StyleSheet.css" rel="stylesheet" /> 
</head> 
<body> 
    <header> 
     <h1>California Road Trip</h1> 
     <h2>Driving the Coast of California</h2> 
    </header> 

    <p> 
     Highway 1 is the infamous winding stretch of road that follows the pacific coast of the U.S. Visit this sit for a virtual experience. <i>Bon voyage!</i> 
     <br /> 
     <b>Call for help now!</b> 
    </p> 

    <p> 
     <video controls="controls" autoplay height="300" width="500" loop> 
      <source src="20160628_110323_64628293200884.mp4" type="video/mp4" /> 
     </video> 
    </p> 

    <div> 
     <img src="columbus-nav-850x637.jpg" alt="Background Image" /> 
    </div> 

    <footer> 
     Copyright &copy; 2016. 
    </footer> 
</body> 
</html>

CSS：

header{ 
    color: #000; 
    text-align: center; 
    border: 500px; 
    background-color: rgba(255, 190, 0, .5); 
    border-radius: 20px; 
} 

p{ 
    text-align: left; 
    margin-left: 20px; 
    font-family: sans-serif, Arial, 'Myriad Pro'; 
} 

div{ 
    position: fixed; 
    top: 20px; 
    z-index: -1; 
    opacity: .5; 
    background-size: cover; 
} 

footer{ 
    position: fixed; 
    bottom: 10px; 
    margin-left: 10px; 
}

背景图像不占用整个屏幕。任何帮助表示赞赏。

这里是一个JSfiddle

来源

2016-07-06 GTown-Coder

您必须设置div img而不是div。给元素一个100％的高度和宽度，它应该覆盖视口。

div img { 
    position: fixed; 
    top: 20px; 
    z-index: -1; 
    opacity: .5; 
    background-size: cover; 
    height: 100%; 
    width: 100% 
}

来源

2016-07-06 18:42:57 gwar9

啊工作！谢谢！ –

添加这些属性的div在CSS文件部分 {

-moz背景尺寸：盖;

-o-background-size：cover;

-webkit-background-size：cover;

}

来源

2016-07-06 18:39:35

我很抱歉，但没有工作 –

背景图像是一个css属性，但您试图将其应用于图像标记。你会想要做这样的事情：

HTML：

<div class="myBackground"></div>

CSS：

.myBackground{ 
    background-image: url(columbus-nav-850x637.jpg); 
    background-size: cover; 
    /*You can make this background fixed on desktop by adding this:*/ 
    background-attachment: fixed; 
}

来源

2016-07-06 18:45:37 will

我知道我可以通过CSS直接设置背景图片，但是我也可以用'z-index = -1'的方式来设置背景图片。将图像发送到背景 –

这确实有效，但如果长宽比不被保持，则图像将伸展。如果您将其应用于一个页面上的多个图像，您还会遇到Firefox中的问题。 – will

要作为背景为您的网页图像被放置在一个div小于你的页面大小。因此，即使图像填满了div，它也不会填满页面。

理查德建议，可能的解决方案之一是将背景图像直接应用于身体。

但是，如果您希望图像位于单独的div中，则首先需要使div覆盖整个页面。对CSS属性稍作更新应该做到这一点。

div{ 
    position: fixed; 
    top: 20px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: -1; 
    opacity: .5; 
    background-size: cover; 
}

接下来你需要让图像覆盖整个div。通过在IMG标记设置

width: 100%; 
height: 100%;

，或者干脆删除img标签和CSS添加

background-image: url("columbus-nav-850x637.jpg");

为DIV本身你可以做到这一点。您可能还需要在“背景”div上设置适当的z-index，以将其放在页面的其他内容之后。

来源

2016-07-06 19:00:46 elem4th

背景大小封面不工作

回答

相关问题