H5--第三课

Posted 2020-08-23 卡尔也好玩

CSS3的背景属性：background-image属性添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

  　　　　　　　　background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

　　　　　　　　  background-size指定背景图像的大小。可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。

　　　　　　　　  background-size:80px 60px;// background-size:100% 100%;

　　　　　　　　  background-origin属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。

　　　　　　　　  background-origin:content-box;

　　　　　　　　  background-clip背景剪裁属性是从指定位置开始绘制。content-box, padding-box,和 border-box区域内剪裁背景图像。

　　　　　　　　  background-clip: content-box;

CSS3的渐变属性：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

　　　　　　　　  background: linear-gradient(direction, color-stop1, color-stop2, ...);

　　　　　　　　  direction可以为left(左开始）、to left(到左结束）、left top（左上角）、30deg（角度）;

　　　　　　　　  径向渐变（Radial Gradients）- 由它们的中心定义

　　　　　　　　  background: radial-gradient(center, shape size, start-color, ..., last-color);

　　　　　　　　  background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

CSS3的rgba透明：rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。