CSS背景设置与Emmet语法

CSS背景设置
通过CSS背景属性，可以给页面元素添加背景样式，页面元素指任意标签。
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。
 
背景颜色
一般默认值是：transparent(透明)
?
1
background-color: dimgray;
背景图片
背景图片的使用场景是：页面中的大背景图和页面中的小图标
?
1
2
3
4
5
6
7
8
9
10
11
12
<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。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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轴的。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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个可以是数字或方位名词任选
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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，可以滚动的
?
1
2
3
4
5
6
body {
  background-image: url(images/97703900184194.jpeg);
  /* 将背景图片固定，形成滚动视觉差, 默认是croll，可以滚动的 */
  /* background-attachment: scroll; */
  background-attachment: fixed;
}
背景复合设置
背景复合写法：为了简化背景属性的代码，可以将这些属性合并简写在同一属性background中。主要此时background的属性值是固定的。
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
?
1
2
3
4
5
body {
  /* 背景复合写法：为了简化背景属性的代码，可以将这些属性合并简写在同一属性background中。主要此时background的属性值是固定的。 */
  /* background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 */
  background: transparent url(images/img_0.jpg) repeat-x fixed top;
}
背景半透明
注意，这里的半透明只是设置背景，盒子里的内容是不受影响的。
通过设置 background: rgba 可以将盒子的背景色改成半透明
?
1
2
3
4
5
6
7
8
注意，这里的半透明只是设置背景，盒子里的内容是不受影响的。
通过设置 background: rgba 可以将盒子的背景色改成半透明
    p {
      width: 100%;
      height: 60px;
      /* 通过设置 background: rgba 可以将盒子的背景色改成半透明*/
      background: rgba(0, 0, 0, 0.4);
    }
 
Emmet语法
在VSCode中使用Emmet语法可以快速创建html/css。
快速生成html标签
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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声明的方式很简单，就是属性首字母简写+值。 就可以了。
?
1
2
3
4
5
6
7
8
9
10
<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+鼠标选中下拉。
 
 
posted @   滴水微澜  阅读(71)  评论(0)  编辑  收藏  举报
相关博文：
· CSS文本，字体设置与元素边框，阴影，显示模式
· Less常用功能使用
· CSS（复合选择器、显示模式、背景属性）
· CSS（二）
· Emmet语法
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示