css把区域图片弄成不同颜色的色块

html-css024

css把区域图片弄成不同颜色的色块,第1张

先在<head>标签里写几个CSS

<style type="text/css">

.blue{ background-color:Blue}

.yellow{ background-color:Yellow }

</style>

还想要什么颜色自己再写就行了,然后哪个<div>里想要什么颜色,将<div>的class属性设成对应的CSS名称就行了。例如<div class="blue">这个<div>背景就是蓝的,这样写方便以后再修改,不必修改每一个<div>,只需要修改<style>里定义的代码就行了

不明白的私。

谢谢采纳

<table width="226" height="136">

 <tr>

  <td width="134">衣服颜色<br />

<div style="background:#FC9 width:60px height:20px display:block"></div> </td>

  <td width="80">价格:xxx元</td>

 </tr>

</table>

这样

缓过来了,开讲放射性渐变吧。

一、放射性渐变原理

别人都用ps解释,我却在渐变上独喜欢flash的渐变变形工具。

别人都说径向渐变,flash里面显示的是放射性渐变,我就沿用了放射性渐变的说法。你看出来啦,我曾经是flash的迷妹!

e84d7f84b44ccb04a4feefd2a9667d64.gif

放射性渐变的核心就是:从中心点出发,辐射到边界处。

设置了四个色块,如图:

429079e8282c5076af4170153c1af3d0.png

用渐变变形工具可以查看

cd5a69fb9311cda5db01c0338b24c840.png

默认第一个色块从中心点出发,沿着半径分布色块,直到边界处。

所以,我们可以理解这里的渐变线是半径。

可以通过改变中心点的位置,边界的大小,半径的长短,三角形的移动实现非对称的渐变等效果。

6522b7dc00c47d236409249b908e6d47.png

原谅我没有来动画版本的,自己用flash试试呗!

其实来个椭圆一样妥妥的。

0ccef5ab67e2b3e35d7640cfab2ab533.png

明白了这个基本的原理后,再看MDN上的这篇文章,是不是感觉很好懂了。

至少这幅图好懂了↓

aab88560ed7f1007df0e78972991fc2a.png

半径就是虚拟渐变射线(virtual gradient ray),中心点就是色块的起点(0%),ending shape就是渐变的边界形状。ending shape只能是正圆(circle)或者椭圆(ellipse)。

二、放射性渐变的语法结构// Definition of the ending shape

radial-gradient( circle, … )/* Synonym of radial-gradient( circle farthest-corner, … ) */

radial-gradient( ellipse, … ) /* Synonym of radial-gradient( ellipse farthest-corner, … ) */

radial-gradient( , … ) /* It draws a circle */

radial-gradient( circle radius, … ) /* A centered circle of the given length. It can't be a percentage */

radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axes are given, horizontal, then vertical */

// Definition of the position of the shape

radial-gradient ( … at , … )

// Definition of the color stops

radial-gradient ( …, , … )

radial-gradient ( …, , )

官方的标准语法HTMD复杂呀。

我们只能一点点攻克了。

先了解几个基本概念:

:指的是中心点的位置,这个定位和background-position的定位是一样的,比如“50px 40px”,“30% 44px”,“left center”等值,一个代表x坐标,一个代表y坐标。如果缺省,代表的是正中间(center)。它的取值也是这几种:

:用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。

:用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。

left:设置左边为径向渐变圆心的横坐标值。

center:设置中间为径向渐变圆心的横坐标值或纵坐标。

right:设置右边为径向渐变圆心的横坐标值。

top:设置顶部为径向渐变圆心的纵标值。

bottom:设置底部为径向渐变圆心的纵标值。

:只能为正圆或者椭圆,正圆表示半径是一样的,椭圆则有x轴、y轴两个半径。默认的值是椭圆(ellipse)。

:沿着渐变线的色彩的值和位置的值。位置的值可以是百分比或者具体的像素,和线性渐变的写法是一样的。比如“#f00 0%”,“red 25%”,“rgba(255,255,255,0.5) 200px”等。

:表示ending shape放射性渐变结束的形状的大小。

常用的有如下几个值:

closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边;

closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角;

farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边;

farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角,这个是默认值;