當前位置:首頁 » 風景景觀 » csstd背景色

csstd背景色

發布時間: 2021-01-19 02:00:03

⑴ td中加一個色塊背景或圖片背景, 要求按百分比橫向填滿, 用背景的原因是還要寫字, css如何寫

td好像不用css就能實現這些
<td width="100" height="100" bgcolor="#aaaaad" background="./image/001.jpg">123</td>
bgcolor是背景顏色
background是背景圖片
你只要設置好td的寬度和高度。他會自動平鋪背景的

⑵ table tr設置background-color 無效 css朋友幫忙看下

應該是被其他的背景覆蓋了。
我們一般不支持給tr設置背景,很容易被td的背景覆蓋,而且td不會繼承tr的背景色,只有td的背景是透明的情況下,才會看到tr的背景色。
曾經做過測試發現,如果將一張圖片設置為tr的背景(未平鋪只顯示一張,靠左),實際顯示卻是每個td中都有一張背景圖。

⑶ 在td里邊必須用css設置背景圖片怎麼寫

首先給td 加一個class 或是 id 例如 <td class="bg_td"></td>
CSS部分

.bg_td{background:url(圖片位置內) no-repeat center center} 屬性自己修改。容

⑷ 如何用css控制滑鼠浮在td上面,td的背景變色,急急急!!

先別看代碼多.其實起作用的就那麼幾段代碼. 你復制以下代碼執行看到效果後就一目瞭然了
<!-- 以下是css實現 -->
<style type="text/css">
a { display:block; height:100%;}
a:link { color:#000; text-decoration:none;}
a:visited { color:#000; text-decoration:none;}
a:hover { color:#f60; text-decoration:none; background-color:#FF0000;}
</style>
<body>
<table border="1" cellspacing="0" cellpadding="0" align="center">
<tr height="50">
<td width="50" height="50"><a href="javascript:void(0);">1</a></td>
<td width="50" height="50"><a href="javascript:void(0);">2</a></td>
<td width="50" height="50"><a href="javascript:void(0);">3</a></td>
</tr>
<tr height="50">
<td height="50"><a href="javascript:void(0);">4</a></td>
<td height="50"><a href="javascript:void(0);">5</a></td>
<td height="50"><a href="javascript:void(0);">6</a></td>
</tr>
<tr height="50">
<td height="50"><a href="javascript:void(0);">7</a></td>
<td height="50"><a href="javascript:void(0);">8</a></td>
<td height="50"><a href="javascript:void(0);">9</a></td>
</tr>
</table>

<!-- 以下是javascript實現 -->
<table border="1" cellspacing="0" cellpadding="0" align="center">
<tr height="50">
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">1</td>
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">2</td>
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">3</td>
</tr>
<tr height="50">
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">4</td>
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">5</td>
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">6</td>
</tr>
<tr height="50">
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">7</td>
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">8</td>
<td width="50" onmouseover="this.style.backgroundColor ='#33CC00';" onmouseout="this.style.backgroundColor ='#fff';">9</td>
</tr>
</table>

⑸ 兩句css給同一個表格的td標簽設置背景色誰會起作用為什麼

這里就涉及到css樣式的優先順序了。
從大的方面將,html文檔中樣式有三種定義方式。
1、外部樣式,通過link引用外部樣式文件,如<link rel="stylesheet" type="text/css" href="style.css"/>
2、內部樣式,在html文檔中定義樣式,如h3{color:green;}
3、內嵌樣式,在某個dom元素上定義style。
這三種方式的優先順序從1-3逐漸增強。
如果同時定義了好幾個樣式作用於一個元素上,則最終起作用的按照以下優先順序。
1. 內聯樣式表的權值最高 1000;
2. ID 選擇器的權值為 100
3. Class 類選擇器的權值為 10
4. HTML 標簽選擇器的權值為 1
權值越高的就優先起作用。

⑹ html table td的背景如何設置可以按照百分比顯示背景色所佔TD的比例。

你可以通過設置background-size

⑺ 如何用CSS實現td被點擊時和點擊後換背景,點擊另一個的時候,它在換回來。。 是用CSS。。。

光CSS可能實現不了這個問題,若是能實現請說明。我現在說下CSS結合JS實現。
首先我不知道你有在一個頁面里有多少個TD,所以我寫個通用的方法。希望能給你幫助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1888/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
.td_bg{
background:#CCC;
}
.td_down{
background:#f00;
}
</style>
<script>
function mousedown(nameId,numId,total){
for(i=0;i<=total;i++){
document.getElementById(nameId+i).className = 'td_bg';
//alert(nameId+i)
}
document.getElementById(nameId+numId).className = 'td_down';
//alert(nameId+numId)
}
</script>
</head>

<body>
<div id="showdiv" style="background:#CCC;"></div>
<table width="200" border="0" cellspacing="1" cellpadding="0">
<tr>
<td id="td0" onclick="mousedown('td',0,8)" class="td_bg"></td>
<td id="td1" onclick="mousedown('td',1,8)" class="td_bg"></td>
<td id="td2" onclick="mousedown('td',2,8)" class="td_bg"></td>
</tr>
<tr>
<td id="td3" onclick="mousedown('td',3,8)" class="td_bg"></td>
<td id="td4" onclick="mousedown('td',4,8)" class="td_bg"></td>
<td id="td5" onclick="mousedown('td',5,8)" class="td_bg"></td>
</tr>
<tr>
<td id="td6" onclick="mousedown('td',6,8)" class="td_bg"></td>
<td id="td7" onclick="mousedown('td',7,8)" class="td_bg"></td>
<td id="td8" onclick="mousedown('td',8,8)" class="td_bg"></td>
</tr>
</table>
</body>
</html>

⑻ JS控制table特定tr的背景顏色

代碼如下:

<script>

//js放到table下,才能檢測到tr數組

var trs = document.getElementById("tableBox").getElementsByTagName("tr");

var trs=document.getElementById("tableBox").getElementsByTagName("tr");

$(function(){

for(var i=0;i<trs.length;i++){

trs[i].onmousedown = function(){

mousedownclick(this);

}

}

});

function mousedownclick(obj){

for(var j=0;j<trs.length;j++){

if(trs[j]==obj){

trs[j].style.background='blue';

}else{

trs[j].style.background='';

}

}

}

</script>

(8)csstd背景色擴展閱讀

js操作table的各種用法:

(1)得到table 中tbody 的內容 :$('#simple-table').find('tbody').html();

(2)點擊td時,獲取點擊的行號:

$('#simple-table tbody').on( 'click', 'td', function (e) {

normalRowIndex = $(this).parent().index(); //行號

console.log("正常工作錶行:"+normalRowIndex);

});

(3)為table追加一行:

function addNormalTR(){

$('#simple-table').find('tbody').append(trtd); //tdtd為拼接的trtd 的html內容。

}

(4) 點擊td中的元素獲取,當前行號: obj.parentNode.parentNode.rowIndex;//obj 為元素對象

⑼ css設置td的背景圖片

背景圖是不能縮放的吧,至少我是沒聽說可以。

可以直接插入圖片,只設置寬度 <img src="test.gif" width="30" />

不要設置高度,設置高度會比例失調。

⑽ js, 怎麼修改單元格<td>的css樣式比如單元格的背景顏色

不要用id直接取元素而且你的樣式寫的也不對

document.getElementById("a1").style.backgroundColor="red";
熱點內容
一部國外電影,一個老男人騎個摩托車 發布:2024-08-19 09:13:10 瀏覽:920
脖子上有睾丸是什麼電影 發布:2024-08-19 09:03:17 瀏覽:374
變形金剛撒誰家的 發布:2024-08-19 08:43:06 瀏覽:478
美國男電影雙胞胎 發布:2024-08-19 08:42:20 瀏覽:764
黑人橄欖球少年收養電影 發布:2024-08-19 08:25:26 瀏覽:918
夏目哉大片 發布:2024-08-19 08:09:22 瀏覽:806
他第一部出演的電視劇是,的英語 發布:2024-08-19 08:07:54 瀏覽:654
電影檢索 發布:2024-08-19 07:48:52 瀏覽:198
誰有視頻 發布:2024-08-19 07:41:55 瀏覽:141
成龍香港鬼片電影大全 發布:2024-08-19 07:39:46 瀏覽:223