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. HomeBrew 安装 Maven 及其 IDEA 配置

    Brew 安装 Maven brew search maven # 使用搜索工具去搜索maven包 brew info maven #使用info查看maven包当前的信息情况,包括版本依赖描述等 b ...

  2. Ubuntu20.04上安装MySQL8.0（绝对保证能够正常使用）

    今天在学习 Spark 连接 MySQL时发现还没安装,便参考了厦门大学实验室的Blog进行操作.但安装完成之后发现没有显示设置密码的选择,但又改不掉root密码(头开始痛起来). 故记录一下安装My ...

  3. 航拍倾斜摄影 Web 3D GIS 数字孪生智慧火电厂

    前言 7 月份,245 个国家气象站日最高气温突破 7 月历史极值:同时,疫情防控形势向好,企业加快复工达产节奏,电力负荷屡创新高.煤电作为我国最主要的电源,用不足 50% 的装机占比,生产了全国约 ...

  4. 入门篇-其之七-Java运算符（下）

    一.三元运算符的使用 三元运算符(也称作三目运算符),使用:和?表示,其格式为:布尔表达式 ? 表达式1 : 表达式2 如果布尔表达式的计算结果是true,那么执行表达式1:否则,如果布尔表达式的计算 ...

  5. 定向减免！函数计算让 ETL 数据加工更简单

    业内较为常见的高频短时 ETL 数据加工场景,即频率高时延短,一般费用大头均在函数调用次数上,推荐方案一般为攒批处理,高额的计算成本往往令用户感到头疼,函数计算推出定向减免方案,让 ETL数据加工更简 ...

  6. P2234

    乐死我了,一道需要用平衡树的算法的题,在我忘了看标签的情况下下意识用了一个普及-难度的超简单思路解决了.当然其中加入了一些半骗分半贪心性质的剪枝. 总之这破算法竟然AC了就离谱,乐死我了 Code # ...

  7. 每天学五分钟 Liunx 0010 | 软件篇： RPM 和 YUM

    1. RPM RPM(RedHat Package Manager),顾名思义是 RedHat 的软件包管理器.它遵循 GPL 规则且功能强大好用,从而逐渐运用到其它 Liunx 发行版中,包括 Fe ...

  8. for-each循环使用iterator进行遍历

    示例如下: public static void main(String args[]) { List list = new LinkedList(); list.add("aa" ...

  9. 【Altium Designer】五颜六色标识的PCB布板（增强PCB可视化特性）

    出现上图中五颜六色的网络标识,对比各个网络会更加清晰,实现步骤如下 打开或关闭  View--->Net Color Override Active   快捷键     F5 设置 displa ...

  10. [转帖]AES算法（四）基本工作模式

    https://zhuanlan.zhihu.com/p/376077687 8 人赞同了该文章 本文所述工作模式可适用于 DES.AES 等分组密码算法中 分组密码算法只能加密固定长度为 N 比特的 ...