美文网首页
元素的层级,背景的设置

元素的层级,背景的设置

作者: 常伟波 | 来源:发表于2018-07-11 19:33 被阅读0次

元素的层级z-index:

z-index(正整数) 数值越大,层级越高
(元素的层级必须开启 定位 后使用)

父元素 的层级无论如何比 子元素的 低

背景

1.透明背景opacity

opacity:0~1之间的数值,0是完全透明,1是完全不透明
IE8及以下的浏览器版本用opacity无效;
IE8以下用: filter:alpha(opacity=50)0~100之间的值,0是完全透明,1是完全不透明


图片.png

2.背景图片 background-img:url(路径):

背景图片小于内容区时,会自动设置平铺;
背景图片大于内容区是,只会显示部分;
可以同时设置背景色和图片

3.设置是否重复背景图像background-repeat:

background-repeat:repeat 默认值,水平和垂直同时设置
background-repeat:repeat-x 图像水平重复
background-repeat:repeat-y 图像垂直重复
background-repeat:no-repeat 背景图仅显示一次

4.设置背景图片的起始位置 background-position:

  1. background-position:top left/right/center * 上左,上右,上中
    background-position:center left/right/center *中左,中右,中间
    background-position:bottom left/right/center *下左,下右,下中
    当只写一个方向时,第二个会默认是center
    缺点:能够用来放图片的位置很有局限性
  2. 用坐标x,y来设置
    这种方法的好处是,图片的位置比较灵活;一直相对于父元素,可以指定负值,不管怎么样它都不会超出父元素
  3. 设置背景是否固定 或者是 随着页面其余部分滚动 background-attachment:
    background-attachment:scroll *默认值,会随之移动
    background-attachment:fixed *页面的背景不动
    background-attachment:inherit *规定应该从父元素 继承background-attachment
    用fixed设置的时候,一般设置在body中,如果设置在其他中,当它在屏幕上不显示的时候,被fixed固定的图片也会消失
    图片.png

简写背景属性

background:#bfa url(img/2.png) center center no-repeat fixed
这里设置内容,如果还有关于背景的东西,应该设置在这一句下面,因为这个没有设置的时候会用默认值

表格的制作

图片.png

长表格要设置三个主要的标签1. <thead> 2. <tbody> 3. <tfoot>

相关文章

  • 元素的层级,背景的设置

    元素的层级z-index: z-index(正整数) 数值越大,层级越高(元素的层级必须开启...

  • HTML----元素层级

    元素的层级内容已在代码 背景background-repeat 设置背景重复background-position...

  • 前端 元素的层级 背景

    元素的层级 内容已在代码 背景 background-repeat 设置背景重复background-posit...

  • 元素层级

    元素的层级 内容已在代码 背景background-repeat 设置背景重复background-positio...

  • 设置元素的层级

    如果定位元素的层级是一样,则下边的元素会盖住上边的 设置透明度 设置元素的透明背景opacity可以用来设置元素背...

  • 知识点 2018-07-11表格样式

    元素的层级; 设置元素的层级:z-index:值(数字);必须先开定位才能使用。 父元素的层级设置的再高也不会覆盖...

  • 2018-08-21

    元素的层级;设置元素的层级:z-index:值(数字);必须先开定位才能使用。父元素的层级设置的再高也不会覆盖子元...

  • CSS深度操作(2)

    一、元素的层级 设置层级如果定位元素的层级是一样,则下边的元素会盖住上边的通过z-index属性可以用来设置元素的...

  • 元素层级、背景、表格

    元素层级 想要设置元素层级必须要开启定位(上一章有定位的描述) 后面的数字是设置层级的数字越大层级越高,但是父类的...

  • 前端 元素的层级 背景

    background-colorbackground-color属性用来为元素设置背 景颜色。需要指定一个颜色值,...

网友评论

      本文标题:元素的层级,背景的设置

      本文链接:https://www.haomeiwen.com/subject/vlncpftx.html