CSS3背景，渐变

background-clib: border-box;  

A、border-box，背景被剪裁到边框盒

B、padding-box，背景被剪裁到内边距框

C、content-box，背景被剪裁到内容框

            border：20px solid transparent;   20px的实线边框是透明的。
            background: url(‘image/1.jpeg‘) no-repeat 0px 0px scroll;

　　     background-clip: border-box;    边框，内边距，内容显示背景图 默认值。
            background-clip: padding-box;   内边距，内容显示背景图，边框不显示。
            background-clip: content-box;   内容显示内景图，边框和内边距不显示背景图，即内边距是透明的。或者是父元素的背景。

================================

            border：20px solid transparent;   20px的实线边框是透明的。
            background: url(‘image/1.jpeg‘) no-repeat 10px 10px scroll;

　　     background-clip: border-box;    边框，内边距，内容显示背景图 默认值。
            background-clip: padding-box;   内边距，内容显示背景图，边框不显示。
            background-clip: content-box;   内容显示内景图，边框和内边距不显示背景图，即内边距是透明的。或者是父元素的背景。

　　　上面图片background-postion:10px 10px; 水平和垂直位移相对于边框盒子，内边距盒子，内容盒子进行定位的：
            background-origin: border-box;    图片相对于边框盒子进行定位
            background-origin: padding-box;  图片相对于内边距盒子进行定位
            background-origin: content-box;  图片相对于内容盒子进行定位

 -------------------

HTML背景透明
opacity:0.5;/*这样设置背景颜色为透明，那么里面的字体也会变成半透明*/

background:rgb(255,255,255,0.2);/*这样只设置背景颜色，里面内容不是透明*/
background: transparent; 背景透明，且文字不透明

filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */

CSS3背景，渐变

原文：https://www.cnblogs.com/Knowledge-is-infinite/p/10734765.html