Css3——background属性详解

background ：背景。在css里面作为css属性一成员，通过该属性可设置背景、背景颜色、背景截取等样式。而仅仅一个background又具有多个子属性。

颜色名称，如： background-color:red ;
十六进制背景色，如： background-color:#f00; ;
rgb颜色，这里如果是rgba，a表示透明程度，为0全透明，为1为完全不透明，
如： background-color:rgb(255,0,03); ;
特殊值：transparent，透明色： background-color:transparent ;

background-image属性用于为一个元素设置一个或多个背景，多个背景之间以逗号隔开。
一张： background-image: url(img/ajpg);
多张： background-image: url(img/ajpg),url(img/bjpg);
特殊值：none，不显示背景图像
background-image: none;

background-repeat 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
常用的4个值：
repeat：水平和垂直方向都重复图像， background-repeat: repeat;
repeat-x：水平方向重复图像
repeat-y：垂直方向重复图像
no-repeat：图像不重复

规定背景图像是否固定或者随着页面的其余部分滚动。
scroll：背景图像相对于页面不动，会随着网页的滚动而移动，默认
fixed：背景图像相对于浏览器窗口不动，内容滚动的时候背景图像不动
background-attachment: fixed;

第一个值为横坐标，第二个值为纵坐标。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。
例如： background-position: right； 代表背景图右侧，垂直方向居中的位置。
百分比位置，如：background-position: 20% 20%;
具体像素位置， 如：background-position: 20px 20px;

background-size 设置背景大小。可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

单张的背景大小可以使用以下三种方法中的一种来规定：

当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:

每个值可以是<length>, 是 <percentage>, 或者 [auto] 。

示例：

为了设定超过一张以上的尺寸时，需要提供多项数值，它们通过逗号分隔。

CSS部分 背景分辨率为427640

分别给box的background-size属性添加不同的属性值，会产生不同的效果。

1、长度 ：可以用px、em、rem等指定背景大小，不能为负值。

background-clip 裁剪，通常和background-origin一起使用，决定设置元素的背景（背景或颜色）是否显示。
注：background-clip只是将背景和背景色粗暴的裁剪。
该属性有四个值
border-box
背景延伸至边框外沿（但是在边框下层）。 background-origin: border-box;

background-origin 规定了指定背景[ background-image ] 属性的原点位置的背景相对区域
border-box
背景的摆放以border区域为参考
padding-box
背景的摆放以padding区域为参考
content-box
背景的摆放以content区域为参考

样式：
先看一下background-origin属性。

先看一下background-clip属性。

这就印证了background-clip只是将背景和背景色粗暴的裁剪。

好的，以上就是我对background的各个属性的理解，实际应用时可能会有部分出入，我们只需要掌握background-color、background-image、background-repeat、background-position、background-size这几个常用的属性即可。
欢迎大家一起交流，讨论。

CSS实现文字透明效果可以使用Opacity 属性即可满足。

CSS opacity 属性相关介绍和案例：

浏览器支持：所有浏览器都支持 opacity 属性。

定义和用法

A、opacity 属性设置元素的不透明级别。

B、默认值：1。

C、继承性：no。

D、版本：CSS3。

E、JavaScript 语法：objectstyleopacity=05。

语法：opacity: value|inherit。

A、value：规定不透明度。从 00 （完全透明）到 10（完全不透明）。

B、应该从父元素继承 opacity 属性的值。

实例：设置 div 元素的不透明级别。

div{opacity:05;} //透明度为05，半透明。

注释：

A、IE8 以及更早的版本支持替代的 filter 属性。例如filter:Alpha(opacity=50)。

简单的用css3，复杂的用png。
css3，背景中间透明：
background-image: linear-gradient(red, red 25%, transparent 25%, transparent 75%, red 75%, red 100%), linear-gradient(to right, red, red 25%, transparent 25%, transparent 75%, red 75%, red 100%);

我想你问的应该不是完全透明，完全透明的GIF png-8都能实现，要在photoshop里做好就行了。这根dw无关，如果要要指定透明度，比如半透明，通常做法是用png-24的格式，在Photoshop里调整好它的透明度，就可以了。
不过IE6不支持png24的格式，半透明区域会变成不透明的灰色。
网上有种iepngfixhtc的方法来让ie6支持png-24格式。有兴趣可以搜一下。
至于其他方法，就是js实现。前卫一点的用css3，不过局限性太大，没普及。

关于透明 rgba()  里面有四个参数，前三个是颜色，最后一个是透明度（范围是0到1）

然后可以用一个小工具                    

 想要什么颜色就可以自己吸取

---