css-5.背景和渐变
来源:互联网 发布:爱卡自动发卡平台源码 编辑:程序博客网 时间:2024/05/29 12:08
背景
·背景色background-color
transparent 设置透明
·背景图片
background-image
eg:
background-image: url(img/head2.png);
background-size: 100px 200px; /*背景图大小,少用,失真*/
background-repeat: repeat;
/*repeat no-repeat repeat-x repeat-y*/
background-position: center;/*图片位置*/
background-position: 20px 20px;
body{
background-image: url(img/head2.png);
background-attachment: fixed;
} /*background-attachment 背景固定*/
css sprites css精灵
渐变
·使用background-image属性进行设置linear-gradient:线性渐变
radial-gradient:径向渐变
repeating-linear-gradient:重复线性渐变
repeating-radial-gradient:重复径向渐变
-linear-gradient:线性渐变
linear-gradient(angle,color1,color2···)
·角度可以to top (0°) to right (90°)
background-image: linear-gradient(180deg,green,red);
background-image: linear-gradient(to right,yellow 30%,red 70%);
/*颜色的百分比,第一个值要比第二个小才可以,否则没有渐变*/
-radial-gradient:径向渐变
radial-gradient(size at position ,color1,color2···)
/*background-image: radial-gradient(100px at left bottom ,yellow,red);*/
/*background-image: radial-gradient(100px at center ,yellow,red);*/
background-image: radial-gradient(100px at 50px 20px ,yellow,red);
/*radial-gradient(size at position ,color1,color2···)
* size 是半径大小
* */
- /*background-image: radial-gradient(100px at 50px 20px ,yellow,red);*/
background-image: repeating-radial-gradient(10px at center ,red 0% ,yellow 20%);
阅读全文
0 0
- css-5.背景和渐变
- css 背景渐变,投影
- css 背景渐变
- CSS 背景渐变
- css背景颜色渐变
- CSS背景颜色渐变
- CSS背景颜色渐变
- CSS背景线性渐变
- css选择器,背景渐变
- CSS渐变背景
- css中的背景渐变
- CSS实现表格边框阴影和背景渐变效果
- CSS实现表格边框阴影和背景渐变效果
- 网页渐变背景 css 转
- css实现背景渐变效果
- CSS 设置背景颜色渐变
- 用css实现背景渐变
- css背景渐变兼容性问题解决
- HDU1023 (卡特兰数入门)
- mysql的内连接,外连接(左外连接,右外连接)巩固
- 图---应用实例
- linux操作系统中的netstat命令查看端口状态的使用和window操作系统查看端口号
- Swift_协议、代理(protocol、delegate可选@objc optional与必需、协议扩展、is as? as!检查协议)
- css-5.背景和渐变
- Web网站的几个并发量级
- 删除用户
- 产品经理——(一)认识产品的这天
- iOS工具栏
- 树链剖分(合集)
- 栈和队列
- OpenGL学习:使用EBO索引绘图
- Pyinstaller Pmw