zoukankan      html  css  js  c++  java
  • CSS背景

    CSS中的背景,类似于Adobe PS中的图层概念。背景为元素添加背景颜色和背景图片提供了支持,实际上每个HTML元素由前景层和背景层组成

    前景层包括内容和边框,背景层包括背景色和背景图

    HTML盒模型的三维透视图如下

    每个HTML盒子,都有以下的CSS属性

    • background-color
    • background-image
    • background-repeat
    • background-position
    • background-size
    • background-attachment
    • background(简写属性)
    • background-clip、background-origin、background-break

    可以用这些属性来控制HTML盒子的背景细节

    background-color

    用来设置盒子的背景色

    body{background-color: darkcyan;}

    上面的代码,可以将整个页面设置为darkcyan色

    background-image

    设置元素的背景图片

     p{background-image: url("dist/img/star.ico")}

    上面讲p元素的背景设置了一张图片,默认情况下,图片会从盒子的左上角,沿水平和垂直方向重复出现,最终将填满整个背景区域

    background-repeat

    控制背景重方式

    它有六个值,默认值是repeat即在水平和垂直方向上都重复,另外三个值repeat-y(沿y方向重复),repeat-x(沿x方向重复),no-repeat(不重复)。示例

    body{background-image: url("dist/img/star.ico");background-repeat: repeat-y}

    为盒子添加背景图,并设置图片只在y方向上重复

    另外两个值是round和space,

    round调节图片大小适应背景,确保图片不被剪裁

    space添加空白适应背景,确保图片不被剪裁

    background-position

    更改背景出现的位置

     background-position有五个值,任何两个值组合起来,可以控制元素背景的位置

  • 相关阅读:
    tftp服务器
    iw工具的使用
    六、【ioctl】应用程序和驱动程序中的ioctl
    位反转现象(Bit Flip)
    openwrt有线网卡的停用与开启
    寒假小记
    ARMLinux汇编到ADS汇编转换需要注意的问题
    c function pointer example
    (转)解决mysql“Access denied for user 'root'@'localhost'”
    c语言 面向对象的栈
  • 原文地址:https://www.cnblogs.com/tao-zi/p/4701520.html
Copyright © 2011-2022 走看看