Question

我一直在尝试在桌子后面制作一个透明的盒子，我可以将它用作它的背景，但它显示在我页面的左侧，而不仅仅是在桌子后面。我有什么想法可以解决这个问题吗？

这是HTML：

<!DOCTYPE HTML>
<HEAD>
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" />
<LINK href="Pictures/Background.css" rel="stylesheet" />
<LINK href="Style/Boxes.css" rel="stylesheet" />
</HEAD>
<BODY>

<nav class="nav">
<ul>
<li class="current"><a href="#"><b>MENU</b></a></li>
<li><a href="Index.html">BLOG</a></li>
<li><a href="#">MUSIC</a></li>
<li><a href="#">PHOTOGRAPHY</a></li>
<li><a href="#">QUOTES & THOUGHTS</a></li>
<li><a href="#">ABOUT ME</a></li>
</ul>
</nav><br><br><br><br><br>

<div class="BlueBox">
<TABLE border="0" align="center" width="60%">
<TR>
<TD ROWSPAN="2" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</TD>
<TD valign="bottom" align="center"><b><i><FONT SIZE="6" COLOR="FFFFFF">What can I say about myself...</FONT></i></b></TD>
<TD ROWSPAN="2" >&nbsp;&nbsp;&nbsp;</TD>
<TD ROWSPAN="2"><IMG SRC="Pictures/Me.JPG" height="400"></TD>
</TR>
<TR>
<TD valign="middle" align="left" >
TEXT
 </TD>
</TR>
</TABLE>
</div>

</BODY>
</HTML>

以下是该框的CSS：

.BlueBox{
position:fixed;
background-color:rgba(0,157,255,0.7);
padding:10px 10px 10px 10px;
border-radius:15px 15px 15px 15px;
}

Answer 1

Just simply remove  **position:fixed;**  from your css.

.BlueBox{
position:fixed;
background-color:rgba(0,157,255,0.7);
padding:10px 10px 10px 10px;
border-radius:15px 15px 15px 15px;
}

Answer 2

你的例子只是另一个块元素（div.bluebox）中的一个块元素（表格）......没有什么可以阻止你的例子像你期望的那样呈现。

为了调试设计，我建议您删除表中的所有其他css文件和rowspans以获得最小的示例。

表CSS / HTML周围的透明框

2 个答案: