html - Bootstrap 透明面板 css 背景 : rgba won't get transparent

标签 html css twitter-bootstrap

<分区>

我想使 Bootstrap 的默认面板透明并尝试使用我在此处找到的答案 ( Transparent Bootstrap Panel ),方法是将以下代码添加到我的样式表中,然后添加 panel-transparent类到我的面板。

CSS:

.panel-transparent {
	background: none;
}
.panel-transparent .panel-heading {
	background: rgba(122, 130, 136, 0.2)!important;
}
.panel-transparent .panel-body {
	background: rgba(46, 51, 56, 0.2)!important;
}
.panel {
	margin-bottom: 20px;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
	padding: 15px;
}
.panel-heading {
	padding: 10px 15px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

HTML:

<div class="panel panel-default panel-transparent">
  <div class="panel-heading">
  </div>
  <div class="panel-body">
    <h3 id="fahrzeugwahlh3">Heading:</h3>
    <p id="fahrzeugwahltext">Text</p>
  </div>
</div>

面板以某种方式获得了所需的颜色,但它不是透明的,我不知道我做错了什么。

参见此处:https://jsfiddle.net/ktLypzgr/

解决方案:

我的样式表链接顺序错误,以至于它们被覆盖了!

有时候就是这么简单... 感谢您的帮助!

最佳答案

.panel-transparent { 背景:无; }

仅删除 background-image 属性。在 none 值之后添加 transparent

关于html - Bootstrap 透明面板 css 背景 : rgba won't get transparent,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39722299/

相关文章:

jquery - jQuery 新手,ajax 不工作

html - 当我调整浏览器大小时图像移动了位置?

javascript - 当浏览器未实现 HTMLUnknownElement 时,如何检查元素是否为未知类型

javascript - 无法在 'appendChild' : The new child element is null 上执行 'Node'

html - Eonasdan Bootstrap 日期时间选择器格式

javascript - 如何在 Bootstrap 中统计消息/警报指示器的总数?

html - 在 Jumbotron 中创建背景图像

css - 使底部薄片(弹出框)粘在按钮上( Angular Material )

css - Bootstrap 覆盖了我网站上表单上的提交按钮

css - CSS 中的 MouseOver 和 MouseOut