css基础背景的使用
背景颜色的设置:p {background-color: gray;} 背景颜色的默认值为:transparent 透明
背景引入图片: body {background-image: url(图片路径);} background-image: url1,url2 引入两张图片,先引进的在上层、后引进的在下层。
引入图片平铺:
background-repeat
repeat-style-->repeat-X|repeat-Y|[repeat|space|round|no-repeat]{1,2} sapce 有间距的平铺、round 伸缩性的平铺。 两个值 :一个是x轴,一个是y轴
背景是否和内容一起滚动:background-attachment scroll不
动(默认值) local一起动;(在同一个容器内)
设置背景的位置:background-position: 可以是top、centor、bottom、left、right这样的关键字,可以是百分比,也可以是length ,可以是一个值,也可以是两个值,两个值表示x轴和y轴。10px 10px; 20% 20%(图片的20% 50% 同时也是这个容器的 20% 50%);centor centor;= 50% 50%;当一个值得时候eg:right x轴为100%,y轴为默认值centor。还可以选择4个值:right 10px top 20px ;距离右边10px,上边20px。
线性渐变linear-gradient()
语法:[ [angle]|to <side-or-corner> ,]?<color-stop>[,<color-stop>]+
可以是一个角度 到 一个边 或者一个角 (可选),然后可以写一些颜色的端点。
<side-or-corner>=[left|right|]||[top|bottom]
<color-stop>=<color>[<percent>|<length>]?
eg:side=》 background-image :linear-gradient(red,blue);(默认是to bottom)
可以反过来 background:linear-gradient(to top,red,blue)
eg:corner=》 linear-gradient(to right bottom,red,blue)从左上角 到 右下角
linear-gradient(0deg,red,blue) 0度 从上到下的一个渐变
linear-gradient (45deg,red, blue) 45度 顺时针旋转45度 从下到上的渐变。
实现一个从左下角到右上角的渐变:background lineare-gradient(to top right ,red,blue)
径向渐变:redial-gradient (一个圆沿着它的半径向外散发,或者是一个椭圆沿着椭圆的半径向外散发)
语法:[[circle||<length>][at<position>]?,|
[ellipse||[<length>|<percentage>]{2}] [at <position>]?,|
[[circle | ellipse ] || <extent-keyword> ] [at<position>]?,|at <position>,
]? <color-stop>[,<color-stop>]+
第一段:设置圆 半径 圆心 (可选)
第二段:设置椭圆 大小 百分比 (俩个值 椭圆有两个半径) 圆心位置(可选)
第三段:圆或椭圆 关键字 圆心位置 (可选)
第四段:可以选择多个颜色
关键字<extent-keyword> closest-side(离圆心最近的一条边) |farthest-side|closest-corner(离圆心最近的角)|farthest-corner
eg:background-image:radial-gradient(closest-side,red,blue); 圆心在中间 ,离最近的一条边,做渐变。
background-image:radial-gradient(circle,red,blue); 如果是一个圆 默认的半径大小为farthest-corner,从中点圆心到最远 的角的距离。
background-image:radial-gradient (circle 100px,red,blue);指定半径的大小为100px。
background-image:radial-gradient (red,blue); 默认是椭圆,经过是farthest-corner,并且x轴半径和y轴半径的比例等于中心到 最近和最远的距离的比例。
background-image:radial-gradient(100px 50px ,red,blue); 椭圆x轴半径为100px,y轴半径为50px;
background-image: radial-grandient(100px 50px at 0 0,red,blue);可以指定椭圆的圆心为 0 0点。
线性渐变和径向渐变 都可以repeat: repeat-linear-gradient(red,blue 20px,red 40px);
background-origin(背景图片在和模型中的位置) 默认值是在 padding-box中(还可以设置border-box、content-box)
background-clip 按照(padding-box、border-box、content-box) 进行裁剪。(只显示在那个区域)
background-size(引入背景图片的大小)
语法:<bg-size>=[<length>|<percentage>|auto]{1,2}|cover|contain
background-size:cover;图片要尽可能的小,但是宽度和高度最小 都不能小于这个容器。
background-size:contain;图片要近可能的大,但是 图片的宽度 和 高度 都不能 超过这个容器。
oracle Form 开发