最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

世界快资讯:CSS背景设置与Emmet语法

来源:博客园


(资料图片)

CSS背景设置通过CSS背景属性,可以给页面元素添加背景样式,页面元素指任意标签。背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等。背景颜色一般默认值是:transparent(透明)
background-color: dimgray;
背景图片背景图片的使用场景是:页面中的大背景图和页面中的小图标
背景图片位置(重点)背景图片的位置设置是非常灵活简单的,它的设置方式有2种,一种是使用方位名词设置,另一种使用数字坐标设置 。方位名词设置方位名词分水平,垂直两类: left right center top bottom ,设置设置方位名词时,它们两个的前后顺序无要求,只要一个设置成水平的,另一个自动推断成垂直的。如果只设置了一个,系统推断出水平或垂直后,另一个默认用center。
精确单位设置使用精确单位设置的话,background-position: x y; 这2个数字的设置是有明确的顺序的,第一个是X轴的,第二个是Y轴的。
            
学服装设计,就到新东方
背景混合设置背景图片位置,混合设置的话,background-position: 0 0; 这2个数字的设置是有明确的顺序的,第一个是X轴的,第二个是Y轴的。其中这2个可以是数字或方位名词任选
        
背景图片位置固定将背景图片固定,形成滚动视觉差, 默认是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标签
      

1

2

3

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

关键词: 背景图片 背景颜色 可以使用