0

単純な問題

目標：ボディの背景色が透けて見えるように、境界線（左右）を完全に透明にします。

試行： http： //jsfiddle.net/ZRQmY/

<html>
<body>
<div id="wrap">
<div class="trap">
    Make the white borders transparent, so when I change the background color the background color will be seen through the borders.
    I've tried rgb() with opacity but no luck
</div>
<div class="trap2">
   This is what I'd like but I'm setting the border = bg color;
</div>

</div>
</body>
</html>

CSS

body {background:#eee;}
#wrap {padding:50px;}
.trap {
width:350px;
background: rgb(238, 238, 238);
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid rgb(216, 199, 143);
}
.trap2 {
width:350px;
margin-top:100px;
background: rgb(238, 238, 238);
border-right: 30px solid #fff;
border-left: 30px solid #fff;
border-bottom: 30px solid rgb(216, 199, 143);
}

私は特定の問題に役立たないように多くの回避策を試しました。

バッグにトリックが残っていますか？

4

2 に答える 2

0

はぁ..送信を押す数秒前に答えを見つけました。

透明にしたい要素の背景を設定するbackground:none;か、まったく設定しないでください。

編集：DavidThomasに感謝します

そうしないと、境界線は（完全に）透明になります。しかし、境界線は、事実上、要素の背景色に「描画」されます。背景色が透明な境界線を通して見えるようにします。

于 2013-02-13T22:40:59.090 に答える
0

これは、境界線の背景が本体ではなく div の背景であるためです。参照用にこの記事をお読みください: http://css-tricks.com/transparent-borders-with-background-clip/

このコード:

#yourElement {
-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

境界線を div の外側にとどめるため、透明度を設定すると、div の背景色ではなく、本文の背景色が表示されます。

更新されたフィドルは次のとおりです。http: //jsfiddle.net/C9gJQ/
境界線に部分的な透明度を使用したため、境界線の動作を確認できますが、好きなように変更できます。

于 2014-05-30T13:25:22.213 に答える