css3的新属性 新增的颜色--- 透明度---两种渐变---定义多张背景图--background-size...

css3
1==》颜色的6种表示的方法
有6种表示颜色的方法 关键字 rgb rgba(css3) 16进制 hsl hsla
hsla h=>是色相，值为360， s=>饱和度，0%--100%； l-->亮度（0%--100%)； a-->透明度（0 表示完全透明，1表示完全不透明）

2==》透明度 opacity
一个元素的 opacity属性会完全的应用在这个元素的本身和它的子孙上， opacity的值在0--1；0表示完全的透明（看不见）
兼容所有的浏览
img{
filter:Alpha(opacity=45); //它的值在0-1
opactiy:0.45; //兼容IE8以下；
}

 

3==》线性渐变
background: linear-gradient(to bottom,red,green); /*从顶部到底部 to是到 效果顶部红 底部绿 你还可以多些几个颜色*/
background: linear-gradient(180deg,red,green); /* 顺时针 上部是红 下面试绿 */
background: linear-gradient(180deg,red,green,pink); /* 顺时针 上部是红 中间绿 底部是粉红 */

 

4===》径向渐变
径向渐变：是从图形的中心（center默认值）向四周放射性渐变， 默认是椭圆形渐变

径向渐变的语法
radial-gradient（形状 大小 at位置;颜色1，颜色2，颜色3,颜色4);

形状：circle是圆形的方式渐变 ellipse是（默认值），是以椭圆的方式进行渐变的
大小：第一种40px;直径是40px的大小； 第二种:20% 30%;横轴渐变的直径是宽度的20%，纵轴渐变是高度的30%；
at位置：一共有9个位置,left,right,top,bottom, left top,.......,center(默认值);

background: radial-gradient(circle 50px,aqua,#333333); /*circle是圆形的方式渐变 50px是渐变的大小，aqua是渐变的颜色，背景颜色是灰色#333333 */

background:radial-gradient(at left top,red,blue); /*左边是红色，右边是绿色*/

 

 

5定义多张背景图==》
#box {
width: 400px;
height: 500px;
border: 1px solid red;

/* background-image: url(./img/b.jpg), url(./img/index7_07.jpg);
background-position:top left,center right;
background-repeat:no-repeat,no-repeat; */

/* 上面的代码时可以简写的 */
background:url("./img/b.jpg") top left no-repeat,
url("./img/index7_07.jpg") center right no-repeat;
}

 

/* 在两张图片不能够单独展开的情况下，先定义的显示在前面 后面定义的显示在后面 */

6==》 background-size设置图片的大小，有4个属性值 (1)长度（经常使用） (2)百分比 (3)cover (4)contain

让图片完全的显示出来
/* 解决如何让图片完全的显示出来 */
width: 100px;
height: 100px;
border: 1px solid red;
background:url("./img/b.jpg") no-repeat; /*122 147图的大小*/
background-size:100px 100px; /*用长度 让图片的值完全的显示出来 值为div的宽高*/

 

 

background-size的第二个属性百分比
width: 100px;
height: 100px;
border: 1px solid red;
background:url("./img/b.jpg") bottom right no-repeat; /*图片在右下角*/
background-size: 50% 50%; /* 宽高各50%*/

background-size的第三个属性 cover
/* 保持图片的长宽比例，并将图缩放成刚好完全覆盖所在区域的最小大小，它会等比例缩放 */
background-size:cover;

 

background-size的第三个属性
width: 70px;
height: 100px;
border: 1px solid red;
background:url("./img/b.jpg") no-repeat;
/* 保持图像的长宽比例 并且图像缩放成所在区域的最大大小（宽会完全覆盖 但是高不会完全覆盖，会有空白） */
background-size: contain;

 

 

总结===》 background-size:简写在background中，这样是可以简写的
width: 70px;
height: 100px;
border: 1px solid red;
background:url("./img/b.jpg") center no-repeat;
background-size: contain;

把上面最后两句简写为：下面的一句
background:url("./img/b.jpg") center/contain no-repeat;

 

 

 

转载于:https://www.cnblogs.com/IwishIcould/p/10423793.html