1.background、color、渐变
1. background
1.1 多重背景
background-image: url(flower.gif), url(paper.gif); // 分别引入两个背景图
background-position: right bottom, left top; // 分别定义两张图片位置
background-repeat: no-repeat, repeat; // 分别定义重复方式
/*简写*/
background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
1.2 background-size
background-size: 100px 80px; // w:100px h:80px
background-size: contain; // 将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）
background-size: cover; // 缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）
全尺寸背景图像
html {background: url(img_man.jpg) no-repeat center fixed; background-size: 100%;
}
1.3 background-origin
指定背景图像的位置
background-origin: border-box; // 从边框的左上角开始
background-origin: padding-box; // 从内边距边缘的左上角开始（默认）
background-origin: content-box; // 从内容的左上角
1.4 background-clip
background-clip: border-box; // 背景绘制到边框边缘 （默认）
background-clip: padding-box; // 背景绘制到内边距边缘
background-clip: content-box; // 背景绘制到内容区边缘
2.Color (交给UI小姐姐就行了)
2.1 RGBA 颜色
rgba(red, green, blue, alpha)
2.2 HSL 颜色
hsl(hue, saturation, lightness)hue(色相): 0 ~ 120 red 120 ~ 240 green 240 ~ 360 blue
saturation(饱和度): 0 ~ 100%
lightness(亮度): 0 ~ 100%
2.3 HSLA 颜色
hsla(hue, saturation, lightness, alpha)
2.4 不透明度opacity
opacity: 0 ~ 1 // 注意：会改变整个元素的不透明度,影响到字体
3.渐变色 （嗯… 这个其实也可以交给设计组的小姐姐）
3.1 linear-gradient
线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);1.从上到下渐变(默认)
linear-gradient(red, yellow);2.从左到右渐变
linear-gradient(to right, red , yellow);3.对角线渐变
linear-gradient(to bottom right, red, yellow); // 从左上到右下4.角度渐变
linear-gradient(90deg, red, yellow); // 顺时针旋转，默认角度为180deg5.多个颜色渐变
linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 6.透明度渐变
linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));7.重复渐变
repeating-linear-gradient(red, yellow 10%, green 20%); // 重复五次，且每一次三种颜色平分渐变
3.2 radial-gradient
弧度渐变
radial-gradient(shape size at position, start-color, ..., last-color);
1.background、color、渐变相关推荐
- R语言ggplot2在可视化图像中添加横线并在横线中添加文本、为横线中添加的文本添加文本框、自定义文本框的填充色（background color for a text annotation）
R语言ggplot2在可视化图像中添加横线并在横线中添加文本.为横线中添加的文本添加文本框.自定义文本框的填充色(background color for a text annotation) 目录
- R语言ggplot2可视化自定义可视化结果的背景色（background color）实战：改变整个画板（panel）的背景色、改变图像（plot）区域的背景色
R语言ggplot2可视化自定义可视化结果的背景色(background color)实战:改变整个画板(panel)的背景色.改变图像(plot)区域的背景色 目录
- Python使用matplotlib可视化自定义背景色实战：自定义可视化图像的背景色（Background Color）
Python使用matplotlib可视化自定义背景色实战:自定义可视化图像的背景色(Background Color) 目录
- html body background color,HTML Style backgroundColor用法及代码示例
HTML DOM中的backgroundColor属性用于设置或返回元素的背景色. 用法: object.style.backgroundColor 它返回元素的背景色. object.style.b ...
- jQuery获取div的背景颜色 How to get background color of div?
直接代码: <script type="text/javascript"> $(document).ready(function(){$("div" ...
- android按钮背景颜色函数,Android按钮背景颜色(Android button background color)
Android按钮背景颜色(Android button background color) 我想在我的应用程序中设置按钮的背景颜色,我无法实现我想要的结果... 我试图设置的颜色是holo_gree ...
- background添加渐变背景和背景图片 bankground-size引起渐变背景偏差
1.渐变背景没问题 .cont{ background:linear-gradient(180deg, #FFBE23 0%, #FF9733 100%); } ...
- android:background=@color/white [create file color.xml at res/values/]
< resources > < color name ="white" >#FFFFFF </ color > <!-- 白色 -- ...
- How to change the background color of button in Footer area
Opportunity的s3在init的时候有加载custom css的文件 ```javascript jQuery.sap.includeStyleSheet(jQuery.sap.getModu ...
- background: linear-gradient()渐变
参数一:可以是方向词 例如 to right.to left. to bottom.to top 也可以是度数例如: 30deg. 90deg 一.一般渐变 未设置角度,则默认为180deg(从上到 ...
最新文章
- 六个方法查看linux硬盘使用状况
- 如何安装适用于Python的yaml软件包？
- Mono 2.0正式发布了
- 有网友提问，关于本地XML转JSON的小工具
- 【拓扑排序】【DP】奖金（ssl 1325）
- struct类型重定义 不同的基类型_C++构造数据类型
- ArcGis Server开发Web GIS新手体验（二）
- 计算机申报专业怎么写,给申请计算机专业的学生的建议
- start_kernel之前的调用流程（head.s）
- cad 万能字体_【干货】CAD实用技巧50条
- labview 上位机报警提示，报警记录，txt文档存储
- 2022年危险化学品经营单位安全管理人员报名考试及危险化学品经营单位安全管理人员复审模拟考试
- 魔戒三曲，黑暗散去；人皇加冕，光明归来
- 1-2 Verilog 4位 二选一 多路选择器
- 国潮风彩色手绘年俗年画春节插画素材
- C++ LinuxWebServer 2万7千字的面经长文（上）
- Win10使用VS2017安装Caffe详细总结
- 4412 fimc to hdmi
- Linux下的多线程編程
- 数据分析1_猫眼TOP100