CSS背景属性用于定义元素的背景效果，常用的有5种背景属性：背景颜色、背景图片、背景图片重复展示的方式、背景附着的方式以及背景位置 background-color background-image background-repeat...类似的方式还有left center、left bottom、right top、right center、right bottom、center top、center center和center bottom...Xpx Ypx 也可以使用像素指定位置，或者像素值和百分比值混合使用 initial 将此属性设置为其默认值 inherit 从它的父元素继承这个属性 例如： body { background-image...: center } 背景图片附着状态background-attachment CSS使用 background-attachment属性指明 背景附件属性来设置背景图像是否是固定的或是与页面的其余部分一起滚动...如果背景在页顶，则页面拉到页脚时看不到页顶元素也就看不到图片了。 fixed 固定背景背景图片，使用该值时，背景图片会一直在固定位置显示。
CSS第五天-定位 静态定位：static 定位的默认值，写边偏移也不会有效果 ---- 相对定位：relative 父元素搭配子绝父相使用 根据自身原来的位置，进行定位 没有脱标，在页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位：absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流，在页面不占有位置 绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度...---- 固定定位：fixed 永远根据浏览器可视区域定位，不会随着滚动条的滚动而滚动 可以直接加宽高，默认宽度是内容宽度 脱离标准流，在页面不占有位置 解决分辨率问题有两种方法… ---- 定位层级...=== 给其父元素添加text-align: center 块级元素 === 给当前元素设置 宽度和margin: 0 auto 浮动元素 === 给外面标准流的父元素设置 宽度和margin：0 auto...设置vertical-align: middle ---- 垂直的用法： 文本框和表单按钮无法对齐 input和img无法对齐 div中的文本框，文本框无法贴顶问题 div不设高度由img标签撑开，此时
background-position属性 背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。...其中替换元素包括img、input、textarea、select和object。...七、background-attachment属性 在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。...scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动。 举例： <!...： image.png 分析： 大家在浏览器中拖动右边的滚动条会发现，背景图片在页面固定不动。
代码块 3 声明了对数据进行解码并将其写入 HTML 页面的 body 标签与 head 标签的函数。代码块 4 使用 eval 函数执行解码后的数据，代码块 5 用于调用代码块 3 中声明的函数。...base64 解码后如下所示： 【加载最终页面的解码代码】 代码块 4 会创建一个带有 4 个参数的 POST 请求。...Conf 为带有 id conf 的 div 标签，在原始 HTML 附件中就存在。...由于来源路径被设置为 x，img 标签的 onerror 属性在加载图像时出错，从而触发执行 onerror 属性中的代码。...解码后可以看到另一个混淆的脚本，与其他变种行为类似。
div，而且这两个div没有设置间距，但上面代码的效果却带了间距： 这是由于浏览器解析行内或行内块标签时，若标签换行，那么效果也出现一个换行的距离。...可以让盒子始终固定在屏幕中的某个位置 例如，完成下图的效果(盒子之间有叠层问题)需要什么步骤？... 俺是div块级元素 原来的div还在那占着位置 得到的效果： 剖析： 注意...例如：某些网页的导航固定在头部 ---- 装饰 垂直对齐 小时候用英语本练英语时，都知道单词书写规范如下： 所以前端也是按照这样，处理行内块和行内元素时按照文字特点解析，以基线为基准对齐。...如下图，当盒子为固定高度，但里面的内容过多就会出现内容溢出情况。
五、盒子模型 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ ? 其实网页布局的本质就是： 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。...盒子里面的文字和图片等元素是 内容区域盒子的厚度 我们成为盒子的边框盒子内容与边框的距离是内边距（类似单元格的 cellpadding)。...*/ 5.4.3、插入图片和背景图片区别 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过...原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。 7.3.3、绝对定位(absolute) 绝对定位是元素以带有定位的父级元素来移动位置，也就是我们常说的拼爹。...7.3.4、固定定位(fixed) 固定定位是绝对定位的一种特殊形式： （认死理型） 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形 完全脱标 —— 完全不占位置； 只认浏览器的可视窗口 ——
-- 外部样式，引入使用link标签，写在head标签中,是单标签，但是rel属性和href属性是必须的，且rel="stylesheet"是固定的引入外部样式才可以生效,href属性指定外部文件的资源路径...，元素会被显示为块级元素，该元素前后会带有换行符 inline 内联元素的默认值。...1.设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置 ； 2.设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响 ； 3.设置相对定位的盒子原来的位置会被保留下来...：下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景； 6.3 fixed 固定定位 偏移设置： left、right、top、bottom； 类似绝对定位，不过区别在于定位的基准不是祖先元素...，当过了设置的时间值后才会被触发 ； 负值：元素过渡效果会从该时间点开始显示，之前的动作被截断 ； 0：默认值，元素过渡效果立即执行； 7.3 过度的触发机制 1.伪类触发 ：hover 鼠标悬停和划过时的显示效果
传递 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的 margin-top 值会传递给父元素 margin-bottom传递 如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是...文字阴影 - text-shadow text-shadow用法类似于 box-shadow ，用于给文字添加阴影效果 的常见格式如下(没有向内) 我们可以通过一个网站测试文字的阴影:...:top、center、bottom 如果只设置了1个方向，另一个方向默认是center 3.5. background-attachment background-attachment决定背景图像的位置是在视口内固定...可以设置以下3个值 scroll:此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动 local:此关键属性值表示背景相对于元素的内容固定。...的后面 其他属性也都可以省略，而且顺序任意 3.7. background-image和img区别和选择 利用 background-image 和 img 都能够实现显示图片的需求，在开发中该如何选择
CSS 其实没有太多逻辑可言 ， 类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。...固定定位fixed(认死理型) 固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。...固定定位完全脱标，不占有位置，不随着滚动条滚动。 记忆法： 就类似于孙猴子， 无父无母，好不容易找到一个可靠的师傅（浏览器），就听的师傅的，别的都不听。 ie6等低版本浏览器不支持固定定位。...， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式， 行内块 的宽度和高度 跟内容有关系 ** 因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式...(渐变的起始位置， 颜色 位置， 颜色位置....)； 背景缩放(CSS3) 通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛
*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。..." 使元素同时具有行内元素和块级元素的特点 display:"none“ 与visibility:hidden的区别： visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...在理论上，被设置为 fixed 的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 示例代码： <!...opacity和rgba()的区别: 1. opacity改变元素\子元素的透明度效果 2. rgba()只改变背景颜色的透明度效果 六、综合示例 1、顶部导航菜单 <!
这些方法依赖于明显区分的颜色、位置和低级特征，对于前景和背景颜色重叠的图像容易产生重影。...第二阶段网络不会对alpha matte进行大规模更改，而只是细化和锐化alpha值，其效果如下图所示： Implementation: 先仅仅更新第一部分的参数，等到其收敛时，固定参数。...本文方法一些限制： 需要两张图：人物前景+无人纯背景 静态背景，固定相机效果最好 主要适合前景为人的 method ?...该网络将带有人物的图像 I、纯背景图像 B‘、人物 S、相邻帧的时间堆栈 M（可选）的软分割作为输入，输出则是一个前景图 F 和一个前景蒙版α。...实验结果 见paper 总结： 提出了一种背景matting技术，该技术可以在自然环境中随意捕获高质量的前景+alpha matter。该方法需要固定相机拍摄两张图，有目标的+无目标的背景图。
*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。...display:"inline-block" 使元素同时具有行内元素和块级元素的特点。...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 示例代码： <!
rgba(0,0,0,0) 、transparent 2️⃣背景图片：background-image（bgi） url中可以省略引号，图片默认水平和垂直方向平铺，类似于背景颜色，不能撑开盒子 3️⃣背景平铺...4️⃣背景位置：background-position（bgp） ①方位名词： 1....） 可以设置宽度和高度 默认宽度是父元素的宽度，默认高度是内容高度 注意：p和h里不能放块元素 代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…...、button、select…… 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline 默认有一个间隙，那个间隙是写代码换行的那个间隙，你把代码排成一排，就没有间隙了...注意点： p标签不要嵌套div、p、h等块级元素 a标签可嵌套任意元素，但a标签不能嵌套a ---- CSS 三大特性： 1️⃣继承性: 子元素有默认继承父元素样式的特点（子承父业） 可通过调试工具判断样式是否可继承
区段、板块等（类似div，但主要针对文档类区域） 侧边栏 文章/文档 HTML5布局的优势：页面代码更加简单、高效；新布局标签本身具有的语义明确告知浏览器其在页面中的位置和结构意义...写在HTML网页结构中，以标签的形式关联图片文件。 2. 背景图片（作为网页的修饰效果，CSS进行表现）。写在css样式表中，如使用background属性来定义背景图。 区别： 1....width和height属性的应用： 1. widht和height的值不需要带有单位（默认单位都是px） 2....定义列表 ++ 有序列表的特殊属性：因为有序列表是带有顺序的排列，有设定排列顺序和起始序号的需求。 列表的特点： 1....项目符号设置基于列表区域和列表项，和默认存在项目符号，没有。 step3：使用背景属性模拟项目符号效果。
://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""> 圆形头像示例 背景重复 repeat(默认...display:”inline-block” 使元素同时具有行内元素和块级元素的特点。...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 <!
一、css属性及用法 1.1css样式操作 块级标签的长度和宽度都是可以设置的，但是行级标签不可以直接设置长度和宽度。...，否则看不到效果，所谓平铺就是几个背景图片把规定的区域铺满。...使块级元素变成行内元素 inline-block 使元素同时具有行内元素和块级元素的特点 display的none和visibility的hidden的区别：两者都可以隐藏元素，但是display将元素隐藏之后...（需要说明的，浮动的框可以覆盖固定的框，但是覆盖不了固定框的文本内容，这些文本内容会被挤出到浮动框下方显示）（另外本人试的浮动的p标签改成的块标签无法覆盖固定的块标签div，但是浮动的div可以。）...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
通过设置块级元素，可使一行只显示一张图片。通过设置行内元素，可使一行显示多张图片。会计元素布局位置时使用 margin 属性，行内元素布局位置时使用 text-align 属性。...这个属性允许你添加投影效果，包括阴影的颜色、模糊半径、偏移量等。...-- 外阴影和内阴影效，使用 inset 关键字来指定内阴影--> 效果： 背景 在 CSS 中，背景是网页设计中常用的样式之一，用于设置元素的背景样式。...： 背景位置 通过 background-position 属性设置背景图片的起始位置，可以使用像素值、百分比，也可以使用关键字。...： 背景附着（固定） 通过 background-attachment 属性设置背景图片是否固定或者随着内容滚动。
如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...注意一下 scroll 与 fixed，一个是相对元素本身固定，一个是相对视口固定，有点类似 position 定位的 absolute 和 fixed。...也就是说，背景图从一开始就已经被固定死在初始所在的位置。...而滚动视差效果，正是不按常理出牌的一个效果，重点来了： 当页面滚动到图片应该出现的位置，被设置了 background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动，...，而背景图是一直固定死的。
行内块元素（inline-block） 在行内元素中有几个特殊的标签——、、， 可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。...背景固定还是滚动 背景的合写（复合属性） background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 背景图片(image) 语法： background-image : none...比如产品展示类 背景图片我们一般用于小图标背景 或者 超大背景图片 section img { width: 200px;/* 插入图片更改大小 width 和 height */ height...height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。...固定定位fixed(认死理型) 固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。
如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...注意一下 scroll 与 fixed，一个是相对元素本身固定，一个是相对视口固定，有点类似 position 定位的 absolute 和 fixed。...fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。 这里的关键在于，即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。...也就是说，背景图从一开始就已经被固定死在初始所在的位置。...而滚动视差效果，正是不按常理出牌的一个效果，重点来了： 当页面滚动到图片应该出现的位置，被设置了 background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动，
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
