CSS 背景 background 属性常用于定义 html 的背景, background 简写属性作用是将背景属性设置在一个声明中, background 背景属性常见为以下这些:.background-color 代表背景颜色 .background-image 代表背景图像 .background-repeat 代表背景图像水平或者垂直平铺 .background-attachment 代表背景图像是否固定或者随着页面的其余部分滚动 .background-position 代表设置背景图像的起始位置 在这些背景效果中 background-color 属性定义了元素的背景颜色, 颜色值通常以以下方式定义: 十六进制 - 如:"#ff0000" RGB - 如:"rgb(255,0,0)" 颜色名称 - 如:"red" 具体用下面的代码展示说明下:
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- CSS 背景 background
- </title>
- <style type="text/css">
- /*background-color: 定义元素背景色 */ div{ /* 颜色值通常以以下方式定义: 十六进制 - 如:"#ff0000"
- RGB - 如:"rgb(255,0,0)" 颜色名称 - 如:"red"*/ color: #f90; color: rgb(red, green,
- blue); color: royalblue; color: rgb(255,255,255); background-color: blueviolet;
- } /*background-image: 定义元素背景图像 */ body{ background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");
- } /*background-repeat: 代表背景图像水平或者垂直平铺 */ body{ background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");
- background-repeat: repeat-x;/* 图像水平平铺 */ background-repeat: repeat-Y;/*
- 图像垂直平铺 */ background-repeat: no-repeat;/* 图像拒绝平铺 */ } /*background-position
- 代表设置背景图像的起始位置 */ /* 提示: 为 background-position 属性提供值有很多方法. 首先, 可以使用一些关键字:
- top,bottom,left,right 和 center; 其次, 可以使用长度值, 如 100px 或 5cm; 最后也可以使用百分数值.
- 不同类型的值对于背景图像的放置稍有差异. */ body{ background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");
- background-position:left top; } /* background-attachment 代表背景图像是否固定或者随着页面的其余部分滚动
- */ body{ background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");
- background-repeat: no-repeat; background-position:800px 1000px;/* 图像将在元素内边距向右移动
- 800px, 向下移动 1000px*/ background-attachment: fixed; } /* background 背景简写
- */ /* div{ background: color image repeat attachment position; } */
- </style>
- </head>
- <body>
- <div>
- 如何在页面滚动齿轮的时候实现背景图不动, 选择 background-attachmn:fixed
- </div>
- <!-- 100 个换行符 br*100 敲下 enter 键 -->
- </body>
- </HTML>
来源: http://www.jianshu.com/p/bb309f5c071c