美文网首页
背景图片

背景图片

作者: xiadada | 来源:发表于2017-04-23 14:16 被阅读0次
    给整体页面加背景色:background-color:blue

    背景图与背景色都设置,优先显示背景图

    用图片当做背景:

    1.默认完全铺满:background-image:url(small.jpg)
    2.水平方向铺满:background-repeat:repeat-x;
    3.数值方向显示:background-repeat:repeat-y;
    4.只显示一次:background-repeat:no-repeat;
    5.定义背景图片随滚动轴的移动方式:background-attachment:
    取值: scroll | fixed | inherit
    scroll: 随着页面的滚动轴背景图片将移动
    fixed: 随着页面的滚动轴背景图片不会移动
    inherit: 继承

    精确控制图片位置

    background-position:水平,竖直;
    background-position:center top;
    background-position:right center ;
    background-position:50px 50px;(像素精确控制)
    计算机屏幕,左上角为原点, 往右为x正,往下为y正

    利用div的盒子加上background-position,精准显示图片的某个位置
    可以理解为背景图为一块幕布,div为一个小窗口

    快速写入背景色与背景图

    background: gray url(bg.png) no-repeat
    先背景色,再背景图,再repeat,再attachment

    相关文章

      网友评论

          本文标题:背景图片

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