CSS实现特殊背景效果



CSS3的出现使得一些以前需要用图片的背景效果也可以直接用CSS实现,今天分享一下三个用CSS3做的特殊背景。这三个例子都使用到了CSS3的线性渐变。

下面以webkit引擎下的线性gradient用法为例:

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新线性渐变写法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则
  1. 对于最新的线性渐变规则,第一个参数为渐变的方向,top 是从上到下、left 是从左到右,若为left top则为从左上角到右下角,也可以设置为角度,表示从某个特定的角度开始,后面的参数则为起点颜色和终点颜色,也可以在中间加上中间点颜色。
  2. 对于老式语法,type指的是渐变类型,linear(线性渐变)或radial(径向渐变),后面则依次为起点、终点位置,起点、终点颜色,中间也可加上中间点颜色,用color-stop()函数,有两个参数,第一个参数表示位置,0表示起点,0.5表示中点,1表示终点,第二个参数为颜色值。

下面介绍三个例子,所有例子都采用如下html语句:

<div class="test">div>

1.切角背景效果

.test{ width: 200px; height: 200px; background: -webkit-linear-gradient(right bottom, transparent 15px, #99CC99 0); }

上述代码首先给div设置了高度和宽度,然后给div的背景设置了一个线性渐变,从div的右下角开始渐变,渐变的开始是transparent也就是透明,一直持续到15px,之后立即变到颜色为#99CC99,只要#99CC99 后面的数值小于15px都会立即变到此颜色,没有渐变效果。
效果图如下:
切角效果图一
如果我们想要在div的左下角和右下角都做出切角的效果就要用到background-size属性和background-repeat属性,具体如下:

.test{ width:200px; height:200px; background: -webkit-linear-gradient(right bottom, transparent 15px, #99CC99 0px) right,-webkit-linear-gradient(left bottom, transparent 15px, #99CC99 0px) left; background-size:50% 100%; background-repeat:no-repeat; }

上述代码给background设置了两个线性渐变,但两个渐变会彼此覆盖,因此我们需要将它们的宽度都缩小为50%,让每个渐变都只应用于div的一半,但是如果我们没有设置background-repeat为不重复的话,每个渐变还是会重复两次,依旧会彼此覆盖,所以我们设置background-size是为了让两个渐变都缩小为50%,并且不重复,这样右下角切角的位于右侧,左下角切角的位于左侧,就能够正常实现这个效果了。
效果图如下:
切角效果图二

2.条纹背景效果

.test{ height: 250px; width: 375px; background-color: #99CC99; /*用最新语法实现*/ background-image: -webkit-linear-gradient(top,rgba(255,255,255,.2) 50%,transparent 0); background-size:100% 50px;/*让背景的高度为50px,控制条纹数目*/ /*用老式语法实现*/ /*background-image:-webkit-gradient(linear, left top,left bottom,color-stop(.5,rgba(255,255,255,.2)),color-stop(.5,transparent),to(transparent));*/ }

给div设置高度宽度,设置背景颜色,紧接着给div设置背景图片,设置为线性渐变,从上向下,起始颜色为rgba(255,255,255,.2),持续到50%处,紧接着颜色变为透明,即为背景色#99CC99,位置为0,意味着立即变为背景色,没有渐变效果。老式语法也是一样的实现思路。
效果图如下:
条纹背景

纸张效果

.test{ width: 300px; height: 300px; /*老式语法*/ /*background:-webkit-gradient(linear,left top,left bottom,from(black),color-stop(3%,#99CC99));*/ /*新的语法实现*/ background:-webkit-linear-gradient(top,black,#99cc99 3%); background-size:100% 30px; }

上述代码同样首先设置宽度高度,紧接着给div设置背景,采用线性渐变,自上向下渐变,开始颜色为黑色,在3%处变为#99cc99颜色,同时需要给div设置background-size,宽度为100%,高度为30px,因此在整个div内便显示出十行的纸张效果。
效果图如下:
纸张效果图