当前位置:首页 » 风景景观 » 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