0

谁能帮我用 bootstrap 实现透明方形流体？（https://twitter.com/ladygaga）

我也想知道如何在那个透明正方形中实现圆角正方形。
提前致谢！！

4

3 回答 3

1

似乎他们只是在该 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;
}
于 2012-07-15T19:23:38.667 回答
1

透明的 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>
于 2012-07-15T19:24:08.953 回答
1

使用透明颜色为您background-color使用 rgba 颜色值。这就是你获得透明度的方式。

对于圆角，使用border-radius.

这是一个包含所有你想要的东西的小提琴 - http://tinkerbin.com/j5A3fKHl

于 2012-07-15T19:30:18.827 回答