背景大小封面不工作

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

背景大小封面不工作

回答

相關問題