Bootstrap 容器背景只能是白色或其他颜色/图像，但不能透明
Posted
技术标签:
【中文标题】Bootstrap 容器背景只能是白色或其他颜色/图像，但不能透明【英文标题】：Bootstrap container background can only be white or some other color/image but not transparent 【发布时间】：2016-02-11 05:49:43 【问题描述】：我的 html 文件中的每个文本元素，无论是在 bootstrap 的容器内还是另一个 div 中，都不会因为我尝试过的操作而变得透明：背景：透明！重要，带有 rgba 不透明度的背景颜色，以及添加不透明度本身。
这是 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>
【问题讨论】：
所以你的背景图片是不可见的。对吗？ @UbiquitousDevelopers 对我来说是正确的......这有什么不同吗？如何摆脱它？ 【参考方案1】：Bootstrap 的默认背景颜色为白色
body
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff; /* here */
你需要覆盖它。
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>【讨论】：
【参考方案2】：查看示例：fiddle
CSS
bodybackground:#666;
#title
color: rgba(255, 255, 255, 0.5);
font-size: 50px;
HTML
<div class="container-fluid" style="background:transparent;" >
<h1 id="title">Butt</h1>
</div>
【讨论】：
以上是关于Bootstrap 容器背景只能是白色或其他颜色/图像，但不能透明的主要内容，如果未能解决你的问题，请参考以下文章