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);
}