谁能帮我用 bootstrap 实现透明方形流体?(https://twitter.com/ladygaga)
我也想知道如何在那个透明正方形中实现圆角正方形。
提前致谢!!
谁能帮我用 bootstrap 实现透明方形流体?(https://twitter.com/ladygaga)
我也想知道如何在那个透明正方形中实现圆角正方形。
提前致谢!!
似乎他们只是在该 div 上使用半透明背景图像来获得玻璃状纹理。图像或背景颜色(例如RGBA(0,0,0,0.2)
)需要将其 Alpha 通道设置为 100% 以外的值。他们的 CSS 看起来像这样。
.wrapper, .wrapper-narrow, .wrapper-permalink {
position: relative;
width: 837px;
min-height: 100%;
padding: 54px 14px 15px;
margin: 0 auto;
background: url(../img/wash-white-30.png);
}
假设您要使用类似的方法。'wrapper' 类提供透明背景,'whitebg' 类提供纯白色背景:
<div class="container-fluid wrapper">
<div class="row">
<div class="span2 well whitebg">
content..
</div>
</div>
</div>
使用此 CSS 为您提供课程所需的内容:
.whitebg {
background-color:white;
}
透明的 DIV(不是方形 :))是使用具有 alpha 通道的 PNG 图像实现的,如下所示:
.wrapper, .wrapper-narrow, .wrapper-permalink {
background: url("../img/wash-white-30.png") repeat scroll 0 0 transparent;
margin: 0 auto;
min-height: 100%;
padding: 54px 14px 15px;
position: relative;
width: 837px;
}
就圆角而言,在该页面上,它们的实现如下:
.module, .promptbird {
background-clip: padding-box;
border-radius: 6px 6px 6px 6px;
line-height: 16px;
margin-bottom: 10px;
position: relative;
}
对于您在引导程序中的要求,仅使用 div 的 css opacity 属性和内部 div 的边框半径属性就可以解决问题。
.transparentDiv { /*make any SQUARE transparent!*/
background: #fff; /*white*/
opacity: 0.5 /*will not work in older IE versions, add filter for it!*/
margin: 0 auto; /* optionally, center it! */
}
.roundedDiv {
border-radius: 3px 3px 3px 3px; /* 3px looks way cool! */
}
用法:
<div class="transparentDiv">I see through you baby!</div>
<div class="roundedDiv ">Love makes the world go round!</div>
使用透明颜色为您background-color
使用 rgba 颜色值。这就是你获得透明度的方式。
对于圆角,使用border-radius
.
这是一个包含所有你想要的东西的小提琴 - http://tinkerbin.com/j5A3fKHl