我在带有背景图片的 div 标签内有 table 和 p 标签。我想让 table 和 p 的背景都透明,这样图像就没有框了。我试过了
style="background-color:transparent;"
带有 p 表 td tr td 标签。但仍然出现盒子。 我怎样才能使整个表格和 p 标签透明。
这是下图: 按钮下方的蓝色 strip 是背景图像 以下是CSS代码
div#registration_form
{
width: 400px;
border-style: solid;
text-align: center;
margin: 50px,auto;
margin: auto;
}
tr,td,th
{
padding-top: 5px;
background-color: transparent;
}
p
{
background: transparent;
}
最佳答案
要让背景颜色显示出来,您需要在当前具有白色背景的更多项(form
和 tbody)上设置
)。这是设置透明度的最终代码:background: transparent
tr,td,th
{
padding-top: 5px;
background-color: transparent;
border:0px;
}
p, form, tbody
{
background: transparent;
}
下面是完整代码和现场演示结果,红色背景显示:
div#registration_form {
width: 400px;
border-style: solid;
text-align: center;
margin: 50px, auto;
margin: auto;
}
tr,
td,
th {
padding-top: 5px;
background-color: transparent;
border: 0px;
}
p,
form,
tbody {
background: transparent;
}
* {
background-color: white;
font-family: "Comic Sans MS", arial, sans-serif;
font-size: 16px;
}
a {
text-decoration: none;
}
input[type="text"],
input[type="password"] {
background-color: #eeeeee;
margin-left: 10px;
font-size: 14px;
border: none;
border-radius: 3px;
color: #888888;
}
input[type="submit"],
input[type="reset"] {
margin-top: 5px;
background-color: #008dde;
color: white;
margin-bottom: 5px;
margin-left: 10px;
border: none;
border-radius: 3px;
height: 30px;
}
<div id="registration_form" style="background:red;">
<form action="RegistrationServlet" method="post">
<table style="background:transparent;">
<tr>
<td>
First Name
</td>
<td>
<input type="text" id="first_name" name="firstname">
</td>
</tr>
<tr>
<td>
Last Name
</td>
<td>
<input type="text" id="last_name" name="lastname">
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" id="password" name="password">
</td>
</tr>
<tr>
<td>
Confirm Password
</td>
<td>
<input type="password" id="confirm_password" name="confirmpassword">
</td>
</tr>
</table>
<p>
<input type="submit" value="Register" id="register">
<input type="reset" value="Reset" id="reset">
</p>
</form>
</div>
JSFiddle 版本:https://jsfiddle.net/qhvmka73/2/
关于html - 如何设置表格背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32924216/