twitter-bootstrap Bootstrap 容器背景只能是白色或其他颜色/图像,但不能是透明的
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/35331726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap container background can only be white or some other color/image but not transparent
提问by Lifeislifebutwhatiswhat
Every text element in my html file either inside the bootstrap's container or another div will not be transparent from what I've tried: background:transparent !important, background-color with rgba opacity, and adding opacity itself.
我的 html 文件中的每个文本元素,无论是在引导程序的容器内还是另一个 div 中,都不会与我尝试过的不同:background:transparent !important,带有 rgba 不透明度的背景颜色,并添加不透明度本身。
Here's the HTML + CSS:
这是 HTML + CSS:
html {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@font-face {
font-family: "elephant";
src: url("elephnt.ttf");
}
#frontpage{
background: transparent;
}
@media(max-width: 480px) {
h1 {
font-size: 12pt;
}
}
#title
{
color: rgb(255, 255, 255);
font-size: 50px;
text-shadow: rgb(3, 3, 3) -1px 4px 9px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background:transparent;" >
<h1 id="title">Butt</h1>
</div>
</body>
回答by Paulie_D
Bootstrap has a default background color of white specificied
Bootstrap 的默认背景颜色为白色
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff; /* here */
}
You need to override that.
你需要覆盖它。
html {
background: url(http://lorempixel.com/image_output/fashion-q-c-640-480-8.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@font-face {
font-family: "elephant";
src: url("elephnt.ttf");
}
@media(max-width: 480px) {
h1 {
font-size: 12pt;
}
}
#title {
color: rgb(255, 255, 255);
font-size: 50px;
text-shadow: rgb(3, 3, 3) -1px 4px 9px;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: transparent !important;
/* important used here for demo */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<h1 id="title">Butt</h1>
</div>

