1

http://nicolasgallagher.com/pure-css-speech-bubbles/demo/を使用して吹き出しを作成しています。吹き出しの内側と三角形の背景を不透明度 0.7 にします。

私が使用している背景の場合: background-color: rgba(0, 0, 0, 0.7);

三角形の場合: opacity:0.7;

しかし、三角形と背景の不透明度が同じではないようです。三角形に高い z-index を設定しましたが、役に立ちません。

私の完全なCSSは次のとおりです。

.infoBubble {
    font-family:arial;
    font-size:12px;
    color:#FFFFFF;
    display: inline-block;
    position: absolute;
    padding:6px;
    background-color: rgba(0, 0, 0, 0.7);
    background:-moz-linear-gradient(#000, #000);
    background:-o-linear-gradient(#000, #000);
    background:linear-gradient(#000, #000);
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
    box-shadow: 1px 1px 3px black;
}

.infoBubble:after {
    content:"";
    position:absolute;
    bottom:-6px;
    left:20px; 
    opacity:0.7;
    border-width:6px 6px 0; 
    border-style:solid;
    border-color:#000 transparent;
    display:block; 
    width:0;
}

ここに jsFiddle: http://jsfiddle.net/malamine_kebe/QzQzW/

助けてくれてありがとう！

4

3 に答える 3

0

これは、メイン バブルの不透明度 (3 つのスタイル) が適用されていないためです。

background:-moz-linear-gradient(#000, #000);
background:-o-linear-gradient(#000, #000);
background:linear-gradient(#000, #000);

を上書きしています

background-color: rgba(0, 0, 0, 0.7);

http://jsfiddle.net/QzQzW/1/

また、使用する場合

-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
-webkit-filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.7));
filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.7));

それ以外の

box-shadow: 1px 1px 3px black;

それはあなたの影が適切に機能するようにします

http://jsfiddle.net/QzQzW/4/

于 2013-05-03T10:19:48.380 に答える
0

これを試して

.infoBubble {
    font-family:arial;
    font-size:12px;
    color:#FFFFFF;
    display: inline-block;
    position: absolute;
    padding:6px;
    background: #000;
    background:-moz-linear-gradient(#000, #000);
    background:-o-linear-gradient(#000, #000);
    background:linear-gradient(#000, #000);
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
    box-shadow: 1px 1px 3px black;
    opacity: 0.7;
}

.infoBubble:after {
    content:"";
    position:absolute;
    bottom:-6px;
    left:20px; 
    opacity:0.7;
    border-width:6px 6px 0; 
    border-style:solid;
    border-color:#000 transparent;
    display:block; 
    width:0;
}
于 2013-05-03T10:14:39.287 に答える