放置圖片

問題在畫面的特定可見性，當你進入網站，在頭的圖片隱藏的一部分，某些部分甚至隱藏更多更高（不知道爲什麼？）。放置圖片

你能幫我放置圖片標題下方，使頭部透明（或部分透明的），所以完整的圖片出現在網站上。

這裏是我的代碼： HTML：`

<html lang="ru"> 
<head>...</head> 

<body> 

    <header>...</header> 

    <div id="center"> 
     <form>....</form> 
    </div> 

    <footer> </footer> 

</body> 
</html>`

CSS：

html { 
height: 100%; 
background: url(../img/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

body { 
margin: 0px; 
font-family: sans-serif; 
color: white; 
width: 100%; 
height: 100%; 
} 

header { 
height: 60px; 

display: inline-block; 
vertical-align: top; 

color: white; 

width: 100%; 
padding-bottom: 20px; 
}

來源

2016-05-23 wiaim

什麼頁腳？這是否也應該在背景圖像之前？ – BDawg

是的，頁腳應該像標題 – wiaim

您可以使用background: rgba()提供良好的透明效果（這不會使文字透明，如opacity會）。我在下面提供了一個片段。我用於佈局的其他一些技巧涉及多個屬性，或者它們僅僅是不直觀的，所以我用評論來更好地解釋我的意圖。

我建議使用單級選擇儘可能多的（和不斷變化的HTML允許的話）。它使整體更容易。我的代碼也反映了這些變化。

/* Background & General Styles */ 
 
* { 
 
    box-sizing: border-box; /* Prevent padding (and borders) from adding to width/height */ 
 
} 
 

 
html, body { 
 
    margin: 0px; /* Remove browser default margins */ 
 
    padding: 0px; /* Remove browser default padding */ 
 
} 
 

 
html { 
 
    height: 100%; /* Helps min-height work properly on body */ 
 
} 
 

 
body { 
 
    position: relative; /* Assist "position: absolute" below */ 
 
    padding-top: 60px; /* Must match header height; make up for header being removed from the document flow */ 
 
    padding-bottom: 60px; /* Must match footer height; make up for footer being removed from the document flow */ 
 
    min-height: 100%; /* Force body to be at least the size of the screen */ 
 
    background: grey; /* Backup color */ 
 
    background: url(http://i.stack.imgur.com/OVOg3.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    font-family: sans-serif; 
 
    color: white; 
 
} 
 

 

 
/* Header */ 
 
.site-header { 
 
    position: fixed; /* Helps us position at the top; header no longer takes up space in the flow of the document */ 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 60px; 
 
    padding: 15px; 
 
    background: rgb(44, 44, 44); /* Backup color */ 
 
    background: rgba(44, 44, 44, 0.5); 
 
} 
 

 

 
/* Main Content */ 
 
.main-content { 
 
    padding: 15px; 
 
} 
 

 

 
/* Footer */ 
 
.site-footer { 
 
    position: absolute; /* Helps us position at the bottom; footer no longer takes up space in the flow of the document */ 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: 60px; 
 
    padding: 15px; 
 
    background: rgb(44, 44, 44); /* Backup color */ 
 
    background: rgba(44, 44, 44, 0.5); 
 
}

<header class="site-header">header</header> 
 
<div class="main-content">content</div> 
 
<footer class="site-footer">footer</footer>

來源

2016-05-23 20:01:19 BDawg

謝謝，這是非常有幫助 – wiaim

@WiAim沒問題！如果您對任何部分有任何疑問，請告知我。 – BDawg

也許這會有所幫助。使用opacity使元素透明或使用rgba color values顯示透明背景顏色。

html { 
 
height: 100%; 
 
background: url('http://placehold.it/800x800?text=example_image') no-repeat center center fixed; 
 
-webkit-background-size: cover; 
 
-moz-background-size: cover; 
 
-o-background-size: cover; 
 
background-size: cover; 
 
} 
 

 
body { 
 
    margin: 0px; 
 
    font-family: sans-serif; 
 
    color: white; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
header { 
 
    height: 60px; 
 
    vertical-align: top; 
 
    color: white; 
 
    padding-bottom: 20px; 
 
    background: rgba(0, 80, 255, .5); //transparency here 
 
} 
 

 
#center { 
 
    display: block; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    width: 80%; 
 
} 
 

 
#center form { 
 
    margin: 0 auto; 
 
    background: rgba(0, 255, 246, .5); //transparency here 
 
} 
 

 
footer { 
 
    background: rgba(88, 114, 51, .5); //transparency here 
 
}

<div id="center"> 
 
    <header>Header</header> 
 
    <form>form</form> 
 
    <footer>Footer</footer> 
 
</div>

來源

2016-05-23 19:02:52 herrh

要顯示下標頭畫面，則可以嘗試添加不透明性或具有α通道的顏色。

您可以嘗試將其添加到標題。

Opacity: 0.7;

不透明度從1到0，其中0是完全透明的。不透明度會影響文本和圖像等標題內的所有內容，因此您要查找的內容多關於Alpha通道（RGBA =紅色，綠色，藍色和Alpha）。要添加這個，你需要添加類似的東西：

Background-color: RGBA(0,0,0,0.5);

https://color.adobe.com/

來源

2016-05-23 19:06:58 Nic727

回答

相關問題