05. 背景和颜色

2017-02-24  本文已影响0人  ErikYu

5.1 设定背景图的大小


CSS3种通过background-size的属性来设置:

div{
    background: url(img/img1.gif);
    background-size: 80px 60px;    /*宽度x高度*/
    background-repeat: no-repeat;
}
div{
    background-size: 100% auto;    /*相当于属性为contain*/
}

background-size还有两个可选项:cover和contain,contain相当于宽度设置为元素宽度、高度为auto;而cover则相当于高度设置为元素高度、宽度为auto;

5.2 利用图片叠加实现多背景


层的上下按照在CSS中书写的顺序来定,最先写的背景在最上面,每层图片的定义用逗号隔开;

div{
    background: url() 0 0 no-reprat,
                url() 200px 0 no-repeat;
}

使用图片背景的origin和clip属性


5.3.1 background-origin属性

指定背景图片的起始位置。正常情况下,背景图片是从内边距的左上角开始的(padding-box)

div{
    background-origin: border-box;     /*边框左上角*/
    background-origin: padding-box;    /*内边距的左上角*/
    background-origin: content-box;    /*内容左上角*/
}

5.3.2 background-clip属性

属性值同上,但是背景图片的大小不会变化,会控制元素背景的显示范围,也就是外围会被割去/增加。

5.4 颜色模式


RGBA格式:原RGB格式增加一个Alpha透明度;
HSLA模式:

div{
    background: hsla(Hue, Saturation, Light, Alpha);
/*  hue:色调
    saturation:饱和度
    light:亮度
    alpha:透明度
}

5.5 透明颜色


opacity属性:

.image{
    fliter: Alpha(Opacity=20);    /*IE兼容代码,应用IE中的滤镜效果*/
    opacity: 0.2
}

5.7 渐变


渐变可以分为linear-gradient线性渐变和radial-gradient放射渐变

5.7.1 线性渐变linear-gradient

可以指定渐变的方向:

.test{
    background: -webkit-linear-gradient(left, red, blue);  /*webkit核心浏览器兼容代码*/
    background: -o-linear-gradient(left, red, blue);  /*opera浏览器兼容代码*/
    background: -moz-linear-gradient(left, red, blue);  /*firefox浏览器兼容代码*/
    background: linear-gradient(to right, red, blue);  /*标准写法*/
}

当然颜色可以设置不止两种,只需要用逗号隔开就行

5.7.2 放射渐变

radial-gradient(position, color 5%, color2 10%,...)

5.8 一些实例


5.8.1 带立体突起效果的按钮

.grey-dropdown{
    background: -webkit-linear-gradient(#ffffff, #e9e9e9);
    background: -moz-linear-gradient(#ffffff, #e9e9e9);
    background: -o-linear-gradient(#ffffff, #e9e9e9);
    background: linear-gradient(#ffffff, #e9e9e9);
}

5.8.2 构造尺寸更灵活的背景

采用CSS方案替换图片,如果标题折行,则自动撑大标题区域。不管几行都可以完美适配。

.header{
    background-image: -webkit-linear-gradient(left, #241a38, #012c57, #031a40);
    background-image: -o-linear-gradient(left, #241a38, #012c57, #031a40);
    background-image: -moz-linear-gradient(left, #241a38, #012c57, #031a40);
    background-image: linear-gradient(left, #241a38, #012c57, #031a40);
}

5.8.3 使用放射渐变制作光影效果

.box{
    width: 200px;
    height: 200px;
    font-size: 80px;
    line-height: 200px;
    text-align: center;
    background: -webkit-radial-gradient(#feb3ad. #fd695d);
    background: -o-radial-gradient(#feb3ad. #fd695d);
    background: -moz-radial-gradient(#feb3ad. #fd695d);
    background: radial-gradient(#feb3ad. #fd695d);
}
上一篇下一篇

猜你喜欢

热点阅读