-1
我正在製作一個將會有幻燈片放映的網頁。正如我希望它有一個淡出(彩色圖像顏色)。我決定讓背景具有顏色 - 阿爾法顏色,所以我需要做的只是將圖像放在背後,並且漸變將始終保持在那裏。將圖像放置在HTML/CSS背景後
現在我該怎樣放置背景圖片的背後?
body {
\t text-align: center;
\t background-image: url("http://i.imgur.com/jBqKhtV.png");
\t background-repeat: no-repeat;
\t background-position: center 1.5%;
\t background-color: #141414
}
.logo {
\t position: absolute;
\t z-index: 11;
\t width: 247px;
\t top: 17px;
\t margin-left: -112px;
}
.headline {
\t display: inline-block;
\t margin-top: 220px;
}
h1 {
\t font-size: 10pt;
\t font-family: Lucida Sans;
\t color: grey;
\t font-style: italic;
\t font-weight: normal;
}
.underline {
\t width: 630px;
\t height: 1px;
\t background-color: white;
\t left: 0px;
\t right: 0px;
\t margin: auto;
\t top: 270px;
\t position: absolute;
\t z-index: 12
}
.navigation {
\t width: 630px;
\t height: 60px;
\t position: aboslute;
\t z-index: 13;
\t left: 0px;
\t right: 0px;
\t margin: auto;
}
h2 {
\t margin-top: 30px;
\t color: white;
\t font-family: Lucida Sans;
\t font-size: 15pt;
\t float: left;
\t margin-left: 65px;
\t font-weight: normal;
}
.home {
\t margin-left: 68px;
}
.slideshow {
\t width: 1330px;
\t height: 630px;
\t position: absolute;
\t z-index: -5;
\t left: 0px;
\t right: 0px;
\t margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
\t <link rel="stylesheet" type="text/css" href="Home_Stylesheet.css">
</head>
<body>
\t <center>
\t \t <img src="http://i.imgur.com/DlXvHKb.png" class="logo">
\t </center>
\t
\t <div class="headline">
\t \t <h1>Cyprus Griptape Manufacturers</h1>
\t </div>
\t
\t <div class="underline"></div>
\t
\t <div class="navigation">
\t \t <h2 class="home">Home</h2>
\t \t <h2>Store</h2>
\t \t <h2>About Us</h2>
\t \t <h2>Contact Us</h2>
\t </div>
\t
\t <div class="slideshow">
\t \t
\t </div>
</body>
</html>
html所需的css代碼 – amit77309
請先閱讀[問]。在問題本身中添加[mcve]。我們無法檢查圖片,我們需要查看您現有的代碼。 –
這張照片並不是我要去的效果。我只是不確定我想要的是否可能。 –