CSS背景设置与Emmet语法
Posted 滴水微澜
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS背景设置与Emmet语法相关的知识,希望对你有一定的参考价值。
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语法的主要内容,如果未能解决你的问题,请参考以下文章