美文网首页
CSS-背景

CSS-背景

作者: 哎呦呦胖子斌 | 来源:发表于2018-09-09 11:55 被阅读0次

    background-color 背景颜色
    background-image:url() 背景图片
    background-repeat 平铺
     repeat-x向上平铺
     repeat-y向下平铺
     repeat 横向和纵向平铺
     no-repeat不平铺
     round(CSS3)背景图像自动缩放直到适应且填充整个容器
     space(CSS3)背景图像以相同的间隔平铺且填充整个容器或某个方向
    background-position 三种写法:
    1. top center bottom left right当有两个参数时,表示水平位置和垂直位置,如果方位名词只写一个,那么另外一个默认为center;
    2. 写具体的像素值,第一个值为x偏移,第二个值为y偏移
    3. 也可以将两个方式混合起来使用
    background-attachment
      scroll 背景图片随内容一起滚走的
      fiexd 背景固定

    背景透明(CSS3)

    background:rgba(r,g,b,a) 最后一个参数在0-1之间

    背景缩放(CSS3)

    background-size:
    1. 宽度 高度;(具体数值或者是百分比都可以)
    如果只写一个参数,表示只改了宽度,高度等比例缩放
    2.cover,会自动调整缩放比例,保证土图片始终填充满整个背景区域,溢出部分会被隐藏
    3.contain,会自动调整缩放比例,保证图片始终完成显示在背景区域,在缩放过程中,如果有宽度或者高度有一个和盒子一样大,就不再缩放,保证了图片的完整。

    多背景图片

    background-image:url(),url(),url();
    如果设置的多重背景图之间存在着交集,即存在层叠关系,前面的背景图会覆盖在后面的背景图之上。
    为了避免背景色将图像盖住,背景色通常都设置在最后一个背景图上。

    什么时候用背景图片、什么时候用插入图片:
    1. 一般情况下,背景图片适合做一些小图标
    2. 产品展示之类的就用插入图片

    相关文章

      网友评论

          本文标题:CSS-背景

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