美文网首页
CSS中的背景和图片的区别

CSS中的背景和图片的区别

作者: 疯狂的蜗牛Dianna | 来源:发表于2018-08-18 17:50 被阅读0次

    1.background-color:颜色;

    背景颜色

    2.background-imge:url(路径);

    盒子有多大就能看到多大的背景图片,如果盒子比较大,那么会自动平铺

    3.background-repeat:;背景平铺

    当值 为repeat的时候背景为平铺
    当值为no-repeat的时候背景为不平铺
    repeat-x沿x轴平铺
    repeat-y沿y轴平铺

    4.background-attachment:;

    背景是否跟随滚动
    scroll滚动
    fixed固定

    5.background-position:;

    取值:1、方位名词
    left right top bottom center这些取值
    方位名词书写顺序不论
    right top右上角
    left top左上角
    right bottom右下角
    left bottom左下角
    2、像素
    background-position: 100px 200px;
    以盒子的左上角为原点,构建一个坐标系,水平向右,垂直向下
    第一个值代表水平位置,第二个值代表垂直位置
    3、百分比
    以父元素的高度和宽度为占几成
    4、混写
    background-position:100px center;
    水平x轴是100px;
    垂直y轴是跟盒子居中;
    或者:
    background-position:center 100px;
    水平x轴是居中的;
    垂直y轴是100px;

    5、背景的简写形式

    background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
    快捷生成方式:bg+tab键
    background:#fff url() 0 0 no-repeat;

    6、img和背景图片的区别

    第一点不同
    1、img不需要设置宽高,可以直接显示出来
    2、背景图片必须设置宽高才能显示,背景撑不开容器
    第二点不同
    1、img是不可以在图片上写字的,字会在盒子的外部(显示不了内容,除非用定位)
    2、背景是可以在图片上写文字的,字在图片的里面
    在实际中作中
    img一般用来做产品图片展示(经常更新)
    背景图片一般来做背景 或者一些很少更新的小icon

    相关文章

      网友评论

          本文标题:CSS中的背景和图片的区别

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