H5--第三课

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(directioncolor-stop1color-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 表示完全不透明。

 

         

 

原文地址:https://www.cnblogs.com/kaerbnvbgfq/p/6183957.html