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;
来源: http://www.bubuko.com/infodetail-2965538.html