0

ブートストラップで透明な正方形の流体を実装するのを手伝ってくれる人はいますか?( https://twitter.com/ladygaga )

また、その透明な正方形に丸みを帯びた正方形を実装する方法を知りたいです。
前もって感謝します！！

4

3 に答える 3

1

そのdivで半透明の背景画像を使用して、ガラス質のテクスチャを取得しているようです。画像または背景色 ( などRGBA(0,0,0,0.2)) は、アルファ チャネルを 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 (正方形ではない :)) は、次のように、アルファ チャネルを持つ 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 に border radius プロパティを使用するだけでうまくいきます。

.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-colorrgba カラー値を使用する場合は、透明色を使用してください。これで透明感が得られます。

丸みのある角は、 を使用して簡単にしborder-radiusます。

ここにあなたが望むすべてのものを含むフィドルがあります - http://tinkerbin.com/j5A3fKHl

于 2012-07-15T19:30:18.827 に答える