我想在某种程度上使div透明,以便通过它可以看到背景图像。所有在线教程似乎都有效,但似乎我错过了项目中一些重要的细节。
CSS:
html {
background: url('../images/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div.container-fluid{
/*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; */
/*filter: alpha(opacity=0); */
/*-moz-opacity: 0.0; */
/*-khtml-opacity: 0.0; */
/*opacity: 0.0; */
/*background: rgba(255,255,255,0);*/
background-color: transparent !important;
color: #ffffff;
opacity: 0.2;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>M</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Cue"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
</head>
<body>
<div class="container-fluid">
<div class="header">
<a href="" class="header-text">M</a>
<h1>M</h1>
</div>
<div class="content">
<main>
</main>
</div>
</div>
</body>
</html>
因为在bootstrap中有body background:#fff;
,所以可以添加到body background:transparent;
您的代码似乎正在工作(请参阅演示)-我在H1
上添加了一个红色边框以供参考。也许我误解了你的问题?
Bootstrap有自己的背景颜色设置。如果你打算使用,你可能想覆盖这些
html {
background: url('http://placekitten.com/g/500/500') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div.container-fluid{
/*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; */
/*filter: alpha(opacity=0); */
/*-moz-opacity: 0.0; */
/*-khtml-opacity: 0.0; */
/*opacity: 0.0; */
/*background: rgba(255,255,255,0);*/
background-color: transparent !important;
color: #fff;
opacity: 0.5;
border: 3px solid red;
}
<div class="container-fluid">
<div class="header">
<a href="" class="header-text">M</a>
<h1>M</h1>
</div>
<div class="content">
<main>
</main>
</div>
</div>