标签：auto repeat-y 方向 class 适应 nta pad uri 覆盖
关于背景
一. 渐变&径向渐变(background-image: -webkit-linear-gradient() && background-image: -webkit-radial-gradient())
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { margin: 200px 0 0 200px; width: 200px; height: 200px; background-color: orange; /* 不用浏览器前缀 chrome : -webkit- Firefox : -moz-; IE : -ms-; opera : -o-; */ /* 1 基本用法*/ /*旋转角度，竖直开始；加前缀，水平开始*/ /*background-image: -webkit-linear-gradient(rgba(255,0,0,.2), yellow, blue 30%, green 100%); background-image: -o-linear-gradient(rgba(255,0,0,.2), yellow, blue, green); background-image: linear-gradient(rgba(255,0,0,.2), yellow , blue 30%, green 30%);*/ /*控制颜色渐变的方向 to right -- 从左向右 to top -- 从下到上 to left -- 从右到左 to bottom --- 从上到下（默认值） */ /*0deg = to top -- 从下到上*/ /*基于0度顺时针旋转45deg*/ /*基于0度逆时针旋转45deg*/ /*设置过渡颜色的起始位置*/ /*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/ /* 2 径向渐变 : 由圆点向外延伸*/ background-image: -webkit-radial-gradient(100px 100px,blue,white,red,black,purple,navy,green,yellow); } </style> </head> <body> <div class="box"></div> <script type="text/javascript"> </script> </body> </html>
二. 渐变&径向渐变()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 508px; height: 300px; border: 10px solid #000; padding: 100px; background: url("C:\\Users\\Public\\Pictures\\Sample Pictures\\jjy.jpg") ; /* 默认：background-clip: padding-box; */ /* background-clip: content-box; border-box 背景被裁剪到边框盒。 测试 padding-box 背景被裁剪到内边距框。 测试 content-box 背景被裁剪到内容框。 */ background-clip: content-box; /* background-origin: padding-box|border-box|content-box; padding-box 背景图像相对于内边距框来定位。（默认） border-box 背景图像相对于边框盒来定位。 content-box 背景图像相对于内容框来定位。 */ background-origin: content-box; /* background-size: length|percentage|cover|contain; length 设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 percentage 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。(原图) contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域(保证不变形) */ /*background-size: 100px;*/ /*background-size: 600px auto; */ /*background-size: 100%;*/ background-size: cover; /*background-size: contain;*//*这个等价于background-size: 100%;*/ /* 多背景：一个盒子可以携带多个背景。 */ /* background: url() repeat-y, url() no-repeat, url(); background-size: auto auto, 600px 600px, auto auto; */ } </style> </head> <body> <div>文字</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { margin: 200px 0 0 200px; width: 200px; height: 200px; background-color: orange; /* 不用浏览器前缀 chrome : -webkit- Firefox : -moz-; IE : -ms-; opera : -o-; */ /* 1 基本用法*/ /*旋转角度，竖直开始；加前缀，水平开始*/ /*background-image: -webkit-linear-gradient(rgba(255,0,0,.2), yellow, blue 30%, green 100%); background-image: -o-linear-gradient(rgba(255,0,0,.2), yellow, blue, green); background-image: linear-gradient(rgba(255,0,0,.2), yellow , blue 30%, green 30%);*/ /*控制颜色渐变的方向 to right -- 从左向右 to top -- 从下到上 to left -- 从右到左 to bottom --- 从上到下（默认值） */ /*0deg = to top -- 从下到上*/ /*基于0度顺时针旋转45deg*/ /*基于0度逆时针旋转45deg*/ /*设置过渡颜色的起始位置*/ /*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/
/* 2 径向渐变 : 由圆点向外延伸*/ background-image: -webkit-radial-gradient(100px 100px,blue,white,red,black,purple,navy,green,yellow); } </style> </head> <body> <div class="box"></div> <script type="text/javascript"> </script> </body> </html>
标签：auto repeat-y 方向 class 适应 nta pad uri 覆盖
原文地址：https://www.cnblogs.com/hangege/p/9085748.html
