用透明背景色覆蓋背景圖像（全屏）
[英]Cover background-image with transparent background-color (full screen)
問題描述
我想用透明顏色覆蓋我的背景圖像，但是顏色不覆蓋背景圖像。
這是我的演示： http : //jsfiddle.net/farna/73kx2/
CSS代碼：
.overlay{
background: rgba(0,0,255,0.5);
margin: 0 ;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
6 個解決方案
解決方案1
2 2014-08-06 06:39:59
添加position: fixed為您的CSS規則：
解決方案2
2 已采納 2014-08-06 06:45:43
現場演示
為此，您要做的就是在身體上使用Pseudo-elements-CSS 。 在這里我正在使用body:after
1.風格：
body{
position:relative;
background: url(http://8pic.ir/images/cgnd518gxezm1m2blqo7.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
margin:0
}
body:after{
position:fixed;
content:"";
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,255,0.5);
z-index:-1;
}
這是你的HTML
2.標記：
<body>
<div class="overlay">
<nav>
<ul>
<li><a href="#portfolio">SHOP</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">PRESS</a></li>
</ul>
</nav>
</div>
</body>
解決方案3
1 2014-08-06 06:46:13
為您的HTML和正文添加height:100% 。 如下更新您的CSS。
body, html{height:100%; margin:0; padding:0;}
.overlay{
background: rgba(0,0,255,0.5);
margin: 0;
width: 100%;
height: 100%;
padding:0;
}
ul{margin:0;}
解決方案4
1 2014-08-06 06:47:25
添加位置：固定在疊加層上：
.overlay{
background: rgba(0,0,255,0.5);
margin: 0 ;
width: 100%;
height: 100%;
top: 0px;
position: absolute;
left: 0px;
}
解決方案5
0 2014-08-06 06:44:35
更新了CSS
.overlay{
background: rgba(0,0,255,0.5);
margin: 0 ;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}
100% height繼承自parent 。 因此，您還必須將其添加到body ，以及body's 父 html 。
但是最簡單的創建方法是，將top: 0; left: 0; bottom: 0; right: 0; position: absolute | fixed;覆蓋為top: 0; left: 0; bottom: 0; right: 0; position: absolute | fixed; top: 0; left: 0; bottom: 0; right: 0; position: absolute | fixed;
解決方案6
0 2014-08-06 06:46:48
使用以下代碼以獲得最佳結果
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
width: 100%
margin: none;
padding: none;
}
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -99999;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#background img {
width: 100%;
height: 100%;
}
#main{ z-index:10;}
</style>
</head>
<body>
<div id="main">
content here
</div>
<div id="background"><img src="bg.jpg"></div>
</body>
</html>
如何使背景圖像上方的透明背景顏色顯示在底部？
[英]How do I make a transparent background-color that is on top of a background-image go to bottom?
CSS讓background-image覆蓋background-color的一部分
[英]CSS let background-image overwrite part of background-color
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.