CSS3背景与渐变
2024-08-27 14:14:02
一、CSS3 背景图像区域
background-clip（指定背景绘制区域）
ackground-clip: border-box / padding-box / content-box; /*没有padding的时候，content-box和padding-box效果一样*/兼容性：IE9+、FireFox、Chrome、Safari、Opera
二、CSS3 背景图像定位
background-position （背景定位）
background-position: px / % ...;
background-origin（设置元素背景图片的原始起始位置）
background-origin: padding-box|border-box|content-box;兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera
三、CSS3 背景图像大小
background-size（指定背景图片大小）
background-size: px / % / cover / contain; /*cover：把背景图片扩展至足够大，以使背景图片完全覆盖区域（即完全不留白）
contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域（至少满足一边不留白）*/兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera
四、CSS3 多重背景图像
background-image: url(img1.jpg), url(img2.png); /*img1放前面，img2放后面*/
五、CSS3 渐变
线性渐变 - 从上到下（默认）
background: linear-gradient(direction, color-stop1, color-stop2, ...);兼容性：IE10+、FireFox16+（3.6 –moz-内核）、Chrome26+（10.0 –webkit-）、Safari6.1+（5.1 –>webkit-）、Opera12.1+（11.6 –o-）
线性渐变 - 从左到右
background:-webkit-linear-gradient( begin-direction, color-stop1, color-stop2, ...);
background: -moz-linear-gradient( end-direction, color-stop1, color-stop2, ...);
background: -o-linear-gradient( end-direction, color-stop1, color-stop2, ...);
background: linear-gradient(to end-direction, color-stop1, color-stop2, ...); /*注意webkit是起始方向*/
线性渐变 – 对角
background:-webkit-linear-gradient( begin-level begin-vertical, color-stop1, color-stop2, ...);
background: -moz-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...);
background: -o-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...);
background: linear-gradient( to end-level end-vertical,color-stop1, color-stop2, ...); /*注意webkit是起始方向*/
线性渐变 – 自定义角度
background:-webkit-linear-gradient(angle, color-stop1, color-stop2, ...); //默认从左往右
background: -moz-linear-gradient(angle, color-stop1, color-stop2, ...); //默认从下往上
background: -o-linear-gradient(angle, color-stop1, color-stop2, ...); //默认从下往上
background: linear-gradient(angle, color-stop1, color-stop2, ...); //默认从下往上（优先级高） /*angle单位deg*/
线性渐变 – 颜色结点自定义分布
语法：同上，并在颜色值后加上 “空格+百分比” （透明色：transparent）
线性渐变 – 重复渐变
语法：同上，并在linear前加repeating-
径向渐变
background: radial-gradient(center, shape size, start-color, ..., last-color); /*center默认居中，可不写
center值改为：px / %等可定位圆心位置*/
径向渐变 - 颜色结点均匀分布（默认）
background:-webkit-radial-gradient(color-stop1, color-stop2, ...);
background: -moz-radial-gradient(color-stop1, color-stop2, ...);
background: -o-radial-gradient(color-stop1, color-stop2, ...);
background: radial-gradient(color-stop1, color-stop2, ...);
径向渐变 - 颜色结点自定义分布
语法：与线性同理
径向渐变 – 设置形状
background:-webkit-radial-gradient(shape, color-stop1, color-stop2, ...);
background: -moz-radial-gradient(shape, color-stop1, color-stop2, ...);
background: -o-radial-gradient(shape, color-stop1, color-stop2, ...);
background: radial-gradient(shape, color-stop1, color-stop2, ...); /*shape的值：
circle —— 圆形
ellipse —— 椭圆（默认）*/
径向渐变 – 尺寸大小（关键字的使用）
background:-webkit-radial-gradient(size, color-stop1, color-stop2, ...);
background: -moz-radial-gradient(size, color-stop1, color-stop2, ...);
background: -o-radial-gradient(size, color-stop1, color-stop2, ...);
background: radial-gradient(size, color-stop1, color-stop2, ...); /*关键字size说明（相对圆心）
closest-side：最近边
farthest-side：最远边
closest-corner：最近角
farthest-corner：最远角*/
径向渐变 – 重复渐变
语法：与线性同理
IE低版本浏览器的渐变
filter:progid:DXImageTransform.Microsoft.gradient( >StartColorstr='color1',EndColorstr='color2',GradientType=0);
综合案例：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>综合</title>
<style type="text/css">
div {
width: 800px;
height: 500px;
background: #abcdef;
background-size: 50px 50px;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image:
-moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image:
-o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(45deg, transparent 75%, #555 75%),
-o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image:
linear-gradient(45deg, #555 25%, transparent 25%, transparent),
linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #555 75%),
linear-gradient(-45deg, transparent 75%, #555 75%);
}
</style>
</head> <body>
<div></div>
</body> </html>
最新文章
- linux昨天修改的文件
- 操作系统开发系列—10.内核HelloWorld ●
- 我的android学习经历39
- C语言宏高级用法 [总结]
- 百度编辑器Ueditor的简单调用
- 为什么要baidu/Google问题 尽量少在群里问问题
- java优化占用内存的方法（一）
- 解决android锁屏或解锁后activity重启的问题
- light oj 1019【最短路模板】
- Ice_cream’s world III（prime）
- C#经典之Application.DoEvents()的使用
- 采用max_dump_file_size 参数限制trc文件大小
- JavaScript获取html元素的实际宽度和高度
- linux上搭建ftp
- JavaScript Hoisting（提升）
- nginx基本用法和HTTPS配置
- firewall 和 iptables 常用命令
- Python使用TCPServer编写（多线程）Socket服务
- delphi 把数据库图片的存取
- 性能跃升50%！解密自主研发的金融级分布式关系数据库OceanBase 2.0