CSS背景设置
通过CSS背景属性，可以给页面元素添加背景样式，页面元素指任意标签。
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。
 
背景颜色
一般默认值是：transparent(透明)
background-color: dimgray;
背景图片
背景图片的使用场景是：页面中的大背景图和页面中的小图标
<style>

    .img {

      width: 500px;

      height: 500px;

      background-color: #e3e;

      /* 背景颜色和背景图片可以同时设置 */

      background-image: url(https://chuquan-public-r-001.oss-cn-shanghai.aliyuncs.com/daily-images/gpu-rasterization-basic-concept.png?x-oss-process=image/resize,w_300);

      /* 背景图片是否平铺 */

      /* background-repeat: no-repeat; */

      background-repeat: repeat-x;

    }

  </style>
背景图片位置（重点）
背景图片的位置设置是非常灵活简单的，它的设置方式有2种，一种是使用方位名词设置，另一种使用数字坐标设置 。
方位名词设置
方位名词分水平，垂直两类: left right center top bottom ,设置设置方位名词时，它们两个的前后顺序无要求，只要一个设置成水平的，另一个自动推断成垂直的。如果只设置了一个，系统推断出水平或垂直后，另一个默认用center。
<style>

    .img {

      width: 500px;

      height: 500px;

      background-color: #e3e;

      /* 背景颜色和背景图片可以同时设置 */

      background-image: url(https://chuquan-public-r-001.oss-cn-shanghai.aliyuncs.com/daily-images/gpu-rasterization-basic-concept.png?x-oss-process=image/resize,w_300);

      /* 背景图片是否平铺 */

      background-repeat: no-repeat;

      /* background-repeat: repeat-x; */

      /* 背景图片的位置设置是非常灵活简单的，它的设置方式有2种，一种是使用方位名词设置，另一种使用数字坐标设置 */

      /* 方位名词：方位名词分水平，垂直两类: left right center top bottom ,设置设置方位名词时，它们两个的前后顺序无要求，只要一个设置成水平的，另一个自动推断成垂直的。如果只设置了一个，系统推断出水平或垂直后，另一个默认用center*/

      background-position: top center;

    }

  </style>

精确单位设置

使用精确单位设置的话，background-position: x y; 这2个数字的设置是有明确的顺序的，第一个是X轴的，第二个是Y轴的。
<style>

    .sheji {

      width: 300px;

      height: 300px;

      background-repeat: no-repeat;

      background-image: url(images/img_0.jpg);

      /* 背景图片位置设置，使用精确单位 */

      /* 使用精确单位设置的话，background-position: x y; 这2个数字的设置是有明确的顺序的，第一个是X轴的，第二个是Y轴的。*/

      background-position: 20px 70px;

      text-indent: 4em;

      line-height: 100px;

    }

  </style>

  <body>

      <div class="sheji">

        学服装设计，就到新东方

      </div>

</body>
背景混合设置
背景图片位置，混合设置的话，background-position: 0 0; 这2个数字的设置是有明确的顺序的，第一个是X轴的，第二个是Y轴的。其中这2个可以是数字或方位名词任选
<style>

    .wangzhe {

      width: 100%;

      height: 1000px;

      background-image: url(images/97703900184194.jpeg);

      /* 背景图片位置，混合设置 */

      /* 背景图片位置，混合设置的话，background-position: 0 0; 这2个数字的设置是有明确的顺序的，第一个是X轴的，第二个是Y轴的。其中这2个可以是数字或方位名词任选*/

      background-position: center 40px;

    }

  </style>

<body>

    <div class="wangzhe"></div>

</body>
背景图片位置固定
将背景图片固定，形成滚动视觉差, 默认是croll，可以滚动的
    body {

      background-image: url(images/97703900184194.jpeg);

      /* 将背景图片固定，形成滚动视觉差, 默认是croll，可以滚动的 */

      /* background-attachment: scroll; */

      background-attachment: fixed;

    }
背景复合设置
背景复合写法：为了简化背景属性的代码，可以将这些属性合并简写在同一属性background中。主要此时background的属性值是固定的。
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
    body {

      /* 背景复合写法：为了简化背景属性的代码，可以将这些属性合并简写在同一属性background中。主要此时background的属性值是固定的。 */

      /* background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 */

      background: transparent url(images/img_0.jpg) repeat-x fixed top;

    }
背景半透明
注意，这里的半透明只是设置背景，盒子里的内容是不受影响的。
通过设置 background: rgba 可以将盒子的背景色改成半透明
注意，这里的半透明只是设置背景，盒子里的内容是不受影响的。

通过设置 background: rgba 可以将盒子的背景色改成半透明

    p {

      width: 100%;

      height: 60px;

      /* 通过设置 background: rgba 可以将盒子的背景色改成半透明*/

      background: rgba(0, 0, 0, 0.4);

    }
 
Emmet语法
在VSCode中使用Emmet语法可以快速创建html/css。
快速生成html标签
<body>

  <!-- 生成标签，直接输入标签名，按tab键即可。比如 div 然后tab键，即可得：<div> </div> -->

  <div></div>

  <!-- 想要同时生成多个相同的标签，加上*就可以了。比如 div*3 就可以快速生成3个div了 -->

  <div></div>

  <div></div>

  <div></div>

  <!-- 如果有父子级关系的标签，可以使用>表示。比如 ul>li 就可以了 -->

  <ul>

    <li></li>

  </ul>

  <!-- 如果有兄弟关系的标签，可以使用+表示。比如 div+p -->

  <div></div>

  <p></p>

  <!-- 想要生成带类名或id名字的，直接写.demo或者#demo 按tab键。如果要自定义标签则标签名+.demo或标签名+#demo; .demo或p.demo或p#demo -->

  <div class="demo"></div>

  <div id="demo"></div>

  <p class="demo1"></p>

  <!-- 想要生成多个标签，它们的类名是有顺序的，可以通过自增符号$;  p.demo1$*3 -->

  <p class="demo1"></p>

  <p class="demo2"></p>

  <p class="demo3"></p>

  <!-- 想要生成的多个标签里面带内容，可以使用{}表示； p{$}*3 -->

  <p>1</p>

  <p>2</p>

  <p>3</p>

</body>
快速生成css
快速生成css声明的方式很简单，就是属性首字母简写+值。 就可以了。
  <style>

    .demo {

      /* w200 */

      width: 200px;

      /* ti2em */

      text-indent: 2em;

      /* lh20px */

      line-height: 20px;

    }

  </style>

快速格式化代码

在VSCode里快速格式化代码快捷键：shift + alt + f 或者 在vs code页面右键，点击“格式化代码”
也可以设置成当我们点击保存时，自动格式化代码
1.文件 -> 首选项 -> 设置
2.搜索emmet.include
3.在settings.json中添加如下设置
"editor.formatOnType":true,
"editor.formatOnSave":true
只需要设置一次，一会都可以自动保存代码了
 
另外：
VSCode同时在多个标签中做光标选中输入的除法方式：shift+option+鼠标选中下拉。
 
 

CSS背景设置与Emmet语法的更多相关文章

  1. CSS复合选择器，元素的显示模式，CSS背景设置

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  2. Css背景设置 、

    每天进步一小步,一年进步一大步. 第一次发博客园文章,主要记录自己学习的一个过程. CSS3 背景 CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制. background-size ba ...

  3. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  4. 认识CSS中css背景样式设置

    前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...

  5. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  6. CSS背景图片常见属性设置

    在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称);  //默认在父级元素内的左上角 2)背景平铺方式:ba ...

  7. HTML/CSS 速写神器 Emmet语法

    Emmet 是高效.快速编写 HTML 和 CSS 代码的一种插件,如果还不了解,请戳Emmet — the essential toolkit for web-developers,再根据你使用的编 ...

  8. 在css中设置图片的背景图，怎么设置图片纵向拉伸

    css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...

  9. CSS之背景设置、字体设置、文本设置

    <html> <head> <meta charset="utf-8"> <title>单行文本框与多行文本框</title& ...

  10. vue-cli创建的webpack工程中引用ExtractTextPlugin导致css背景图设置无效的解决方法

    当我们用vue-cli创建项目后,如果在我们的template模板文件中的css样式设置中,有设置了background-image的属性,并且url值传入的是相对路径,那么当我们在打包生产代码时,w ...

随机推荐

  1. Codeforce1343C. Alternating Subsequence

    Recall that the sequence b is a a subsequence of the sequence a if b can be derived from a by removi ...

  2. 如何在公司项目中使用 WebSocket— 入门实战指南

    本文从 WebSocket 基础概念出发,介绍在实际开发中从本地联调到部署上线的流程以及注意事项,让 WebSocket 小白以最小成本应用到项目中. 一.WebSocket 基础 1.什么是 Web ...

  3. java获取部门树的方法实例

    开发中如何获取一个树结构是非常常见的需求,本示例演示一下该功能如何实现. 1.数据准备(mysql) CREATE TABLE `dept` ( `dept_id` int NOT NULL AUTO ...

  4. C#读取FX5U线圈（modbusTCP）

    第一步:导入所需的类库 第二步:包含命名空间 第三步:实例化modbus类 ModbusTcpNet busTcpClient = null; busTcpClient = new ModbusTcp ...

  5. spring boot 集成配置阿里 Druid监控配置

    本文为博主原创,转载请注明出处: github 地址如下:https://github.com/alibaba/druid/wiki 其相关问题也可参考:https://github.com/alib ...

  6. Verilog Review

    Agenda 目的 Verilog概述 Verilog建模 模块 模块组成 书写建议 时延 Verilog基本语法 标识符 可读性 注释 空格 数据类型 操作数 运算符 条件语句 循环语句 函数 Ve ...

  7. 《OnJava》——11内部类

    内部类 利用内部类,可以将逻辑上存在关联的类组织在一起,而且可以控制一个类在另一个类中的可见性. 内部类和组合不同,内部类是一种代码隐藏机制:将代码放在其他类的内部. 11.1 创建内部类 创建内部类 ...

  8. [转帖]一份完整的阿里云 Redis 开发规范，值得收藏！

    https://blog.csdn.net/NicolasLearner/article/details/117449847 作者:付磊-起扬 http://yq.aliyun.com/article ...

  9. Oceanbase开源版 数据库恢复MySQL数据库的过程

    # Oceanbase开源版 数据库恢复MySQL数据库的过程 背景 想进行一下Oceanbase数据库的兼容性验证. 想着用app create 数据库的方式周期比较长. 所以我想着换一套 备份恢复 ...

  10. [转帖]使用 TiFlash

    TiDB试用 来源:TiDB  浏览 490 扫码 分享 2021-04-20 20:57:48 使用 TiFlash 按表构建 TiFlash 副本 查看表同步进度 使用 TiDB 读取 TiFla ...