![](/img/trans.png)
[英]Css - background-img url no-repeat center center Not working
[英]CSS - Linear Gradient Background Color no-repeat is not working for <tr> if it has multiple tds
我想為TR元素應用css3漸變(左右透明)背景色, 如下所示 。
如果只有一個TD元素,則下面的代碼可以正常工作,其中超過一個td時,背景梯度開始針對每個td重復...
我想念什么嗎?
CSS
table{border-collapse:collapse;}
table tr td{padding:5px;border:1px solid #000; }
table tr{
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkOTNiOSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzFkOTNiOSIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMWQ5M2I5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjMWQ5M2I5IiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWQ5M2I5IiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(left, rgba(29,147,185,0) 0%, rgba(29,147,185,0.5) 25%, rgba(29,147,185,1) 50%, rgba(29,147,185,0.5) 75%, rgba(29,147,185,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(29,147,185,0)), color-stop(25%,rgba(29,147,185,0.5)), color-stop(50%,rgba(29,147,185,1)), color-stop(75%,rgba(29,147,185,0.5)), color-stop(100%,rgba(29,147,185,0)));
background: -webkit-linear-gradient(left, rgba(29,147,185,0) 0%,rgba(29,147,185,0.5) 25%,rgba(29,147,185,1) 50%,rgba(29,147,185,0.5) 75%,rgba(29,147,185,0) 100%);
background: -o-linear-gradient(left, rgba(29,147,185,0) 0%,rgba(29,147,185,0.5) 25%,rgba(29,147,185,1) 50%,rgba(29,147,185,0.5) 75%,rgba(29,147,185,0) 100%);
background: -ms-linear-gradient(left, rgba(29,147,185,0) 0%,rgba(29,147,185,0.5) 25%,rgba(29,147,185,1) 50%,rgba(29,147,185,0.5) 75%,rgba(29,147,185,0) 100%);
background: linear-gradient(to right, rgba(29,147,185,0) 0%,rgba(29,147,185,0.5) 25%,rgba(29,147,185,1) 50%,rgba(29,147,185,0.5) 75%,rgba(29,147,185,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001d93b9', endColorstr='#001d93b9',GradientType=1 );
background-repeat:no-repeat;
width:auto;
text-align:center;
}
HTML
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="5">This is working fine</td>
</tr>
<tr>
<td>lorem</td>
<td>ipsum</td>
<td>dolar</td>
<td>sit</td>
<td>amet</td>
</tr>
<tr>
<td>Sed aliquam dolor</td>
<td>sit amet dolor</td>
<td>varius</td>
<td>dignissim</td>
<td>imperdiet</td>
</tr>
</table>
table{border-collapse:collapse;} table tr td{padding:5px;border:1px solid #000; } table tr{ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkOTNiOSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzFkOTNiOSIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMWQ5M2I5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjMWQ5M2I5IiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWQ5M2I5IiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(left, rgba(29,147,185,0) 0%, rgba(29,147,185,0.5) 25%, rgba(29,147,185,1) 50%, rgba(29,147,185,0.5) 75%, rgba(29,147,185,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(29,147,185,0)), color-stop(25%,rgba(29,147,185,0.5)), color-stop(50%,rgba(29,147,185,1)), color-stop(75%,rgba(29,147,185,0.5)), color-stop(100%,rgba(29,147,185,0))); background: -webkit-linear-gradient(left, rgba(29,147,185,0) 0%,rgba(29,147,185,0.5) 25%,rgba(29,147,185,1) 50%,rgba(29,147,185,0.5) 75%,rgba(29,147,185,0) 100%); background: -o-linear-gradient(left, rgba(29,147,185,0) 0%,rgba(29,147,185,0.5) 25%,rgba(29,147,185,1) 50%,rgba(29,147,185,0.5) 75%,rgba(29,147,185,0) 100%); background: -ms-linear-gradient(left, rgba(29,147,185,0) 0%,rgba(29,147,185,0.5) 25%,rgba(29,147,185,1) 50%,rgba(29,147,185,0.5) 75%,rgba(29,147,185,0) 100%); background: linear-gradient(to right, rgba(29,147,185,0) 0%,rgba(29,147,185,0.5) 25%,rgba(29,147,185,1) 50%,rgba(29,147,185,0.5) 75%,rgba(29,147,185,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001d93b9', endColorstr='#001d93b9',GradientType=1 ); background-repeat:no-repeat; width:auto; text-align:center; }
<table cellpadding="0" cellspacing="0" width="100%"> <tr> <td colspan="5">This is working fine</td> </tr> <tr> <td>lorem</td> <td>ipsum</td> <td>dolar</td> <td>sit</td> <td>amet</td> </tr> <tr> <td>Sed aliquam dolor</td> <td>sit amet dolor</td> <td>varius</td> <td>dignissim</td> <td>imperdiet</td> </tr> </table>
產量
table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkOTNiOSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzFkOTNiOSIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMWQ5M2I5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjMWQ5M2I5IiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWQ5M2I5IiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(left, rgba(29,147,185,0) 0%, rgba(29,147,185,0.5) 25%, rgba(29,147,185,1) 50%, rgba(29,147,185,0.5) 75%, rgba(29,147,185,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(29,147,185,0)), color-stop(25%,rgba(29,147,185,0.5)), color-stop(50%,rgba(29,147,185,1)), color-stop(75%,rgba(29,147,185,0.5)), color-stop(100%,rgba(29,147,185,0))); background: -webkit-linear-gradient(left, rgba(29,147,185,0) 0%,rgba(29,147,185,0.5) 25%,rgba(29,147,185,1) 50%,rgba(29,147,185,0.5) 75%,rgba(29,147,185,0) 100%); background: -o-linear-gradient(left, rgba(29,147,185,0) 0%,rgba(29,147,185,0.5) 25%,rgba(29,147,185,1) 50%,rgba(29,147,185,0.5) 75%,rgba(29,147,185,0) 100%); background: -ms-linear-gradient(left, rgba(29,147,185,0) 0%,rgba(29,147,185,0.5) 25%,rgba(29,147,185,1) 50%,rgba(29,147,185,0.5) 75%,rgba(29,147,185,0) 100%); background: linear-gradient(to right, rgba(29,147,185,0) 0%,rgba(29,147,185,0.5) 25%,rgba(29,147,185,1) 50%,rgba(29,147,185,0.5) 75%,rgba(29,147,185,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001d93b9', endColorstr='#001d93b9',GradientType=1 ); background-repeat:no-repeat; width:100%; text-align:center; }
現在將td背景設置為白色,然后將鼠標懸停設置為透明背景
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.