html怎么让背景颜色百分比,jquery – CSS设置背景颜色只是表行宽度的一个百分比...
您可以使用线性梯度.
如果百分比是40%:
table{
background: -webkit-gradient(linear, left top, right top, color-stop(40%,#F00), color-stop(40%,#00F));
background: -moz-linear-gradient(left center, #F00 40%, #00F 40%);
background: -o-linear-gradient(left, #F00 40%, #00F 40%);
background: linear-gradient(to right, #F00 40%, #00F 40%);
}
所以,在JavaScript中,
var percentage=40,
col1="#F00",
col2="#00F";
var t=document.getElementById('table');
t.style.background = "-webkit-gradient(linear, left top,right top, color-stop("+percentage+"%,"+col1+"), color-stop("+percentage+"%,"+col2+"))";
t.style.background = "-moz-linear-gradient(left center,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
t.style.background = "-o-linear-gradient(left,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
t.style.background = "linear-gradient(to right,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
如果要将其应用于每一行的方式不同:
var col1="#F00",
col2="#00F";
var els=document.getElementById('table').getElementsByTagName('tr');
for (var i=0; i
var percentage = Number(els[i].getElementsByTagName('td')[1].firstChild.nodeValue);
els[i].style.background = "-webkit-gradient(linear, left top,right top, color-stop("+percentage+"%,"+col1+"), color-stop("+percentage+"%,"+col2+"))";
els[i].style.background = "-moz-linear-gradient(left center,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)" ;
els[i].style.background = "-o-linear-gradient(left,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
els[i].style.background = "linear-gradient(to right,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)" ;
}
问题是将背景设置为tr可以很好地在Firefox和Opera上运行,但是在Chrome上,渐变应用于每个单元格.
#table td {display: inline-block;}
html怎么让背景颜色百分比,jquery – CSS设置背景颜色只是表行宽度的一个百分比...相关推荐
- php设置背景为透明,css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- php设置背景图片的代码,css设置背景图片如何实现?(代码实例)
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
- CSS设置背景颜色 拼接 (一半黑一半白) 条纹 渐变
CSS设置背景颜色 拼接 (一半黑一半白) 条纹 渐变 首先下面是用到的css样式 线性渐变 这个属性我还说不明白 我就简单的使用一下 有兴趣的搜索CSS线性渐变就OK background-imag ...
- CSS设置背景颜色透明的两种方法
在css中设置背景颜色透明的方法有两种: 一种是通过rgba方法设置,另一种是通过backgroundh和opacity设置 下面分别是css中 两种方法实现的背景颜色透明实例 1,通过backgro ...
- background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
- html设置背景图片高度,如何使用CSS设置背景图像的大小?
如何使用CSS设置背景图像的大小?下面本篇文章就来给大家介绍一下使用CSS设置背景图像大小的方法,希望对大家有所帮助. image CSS background-size属性可用于设置背景图像大小:使 ...
- CSS背景图片定位(background-position,css sprit,背景定位,background-imag
CSS背景图片定位(background-position,css sprit,背景定位,background-imag 标签: 杂谈 分类: css 在CSS中,背景图片的定位方位有3种: 1)关键 ...
- Web前端线上系统课-01-HTML+CSS/06-CSS盒子模型-CSS设置背景
CSS盒子模型-CSS设置背景 盒模型 margin <!DOCTYPE html> <html lang="en"><head><met ...
- html+页面的背景透明,css设置背景透明 元素不透明
css设置背景透明 元素不透明 在做前端页面的时候,我们会遇到这样的情况,需要背景为半透明状态,但是层里面的内容不需要为透明的状态.有时候我们设置的时候会出现不管内容还是背景同时都成透明了,如何实现背 ...
最新文章
- TLS1.3 协议的Golang 实现——ClientHello
- java中string与byte[]的转换
- 移动端 设置 小于12px 字体 初探
- 关闭子窗口刷新父窗口
- gogs只支持mysql5.7_Gogs 搭建教程
- 使用C语言和i2c-dev驱动
- 关于activity和thread生命周期
- 第二十次CCF计算机软件能力认证总结
- 用户思维模型,围绕用户核心四大模块,拉新、养熟、成交、裂变循环的效果...
- 视频技术系列 - 2020年超高清视频技术创新实践
- YII 1.0 隐藏单入口index.php 设置路由与伪静态
- 安卓虚拟键盘_微软双屏Surface Duo上的安卓应用体验:可瞬间变身笔记本电脑
- OSChina 周五乱弹 —— 男友手机上存了好多鸡的照片
- Struts中动态ActionForm与静态ActionForm有什么区别?_
- OSI七层协议大白话解读
- 傲梅分区助手看不到linux,傲梅分区助手使用教程
- ASP,PHP,ASPX生成静态页大全
- [AAM-GCN Neurocomputing2021] Attention adjacency matrix based graph convolutional networks for skele
- loT行业生死竞速:Aqara绿米得用户得天下
- 蓝桥杯python-找单词出现次数最多的字母