• CSS 背景 background 讲解


    背景语法:
    background: background-color || background-image || background-repeat || background-attachment || background-position

    CSS中背景单词:
    background CSS手册查询-background手册
    background-color 设置颜色作为对象背景颜色
    background-image 设置图片作为背景图片
    background-repeat 设置背景平铺重复方向
    background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。
    background-position 设置或检索对象的背景图像位置。

    Background背景样式的值是复合属性值组合,也就是背景单词的值可以跟多个属性值,值与值之间使用一个空格间隔链接上即可。
    如:
    background:#000 url(图片地址) no-repeat left top

    Css background背景作用:
    1、设置纯色背景。背景background可以设置对象纯色的背景颜色,
    2、设置图为背景。可以设置对象背景为图片,如果背景是图片可以让图片重复平铺横铺,或将图片作为对象背景固定在对象任何位置。

    Background分析解析图

    background背景语法结构分析图

                 Css background复合背景结构分析图

    Body{background:#FFF url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0 fixed } 

    CSS图片背景   -   TOP

    这里说的是以图片作为背景图片 -  CSS 背景图片详细介绍:http://www.divcss5.com/jiqiao/j80.shtml
    CSS可以使用background或background-image直接引用图片地址来设置图片作为对象背景。

    background:url(http://www.divcss5.com/img/logo.gif);设置DIVCSS5的LOGO图片作为背景

    background-image:url(http://www.divcss5.com/img/logo.gif);具有相同效果。这样设置图片作为背景有个缺陷就是图片会上下左右的重复,接下来我们只需看以下图例教程即可掌握CSS background

    CSS background解剖图

                         图片背景样式(固定、滚动)

    实现这个效果使用CSS单词是background-attachment 当然通常情况下背景默认是固定的如果是自己使用CSS background简写则如上图。
    background-attachment使用解析:
    background-attachment:fixed; 背景固定
    background-attachment:scroll css背景图片是随对象内容滚动

    图片background背景语法:

    background-image :url (url)
    background-image :url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif)设置对象背景为图片http://www.divcss5.com/img201301/divcss5-logo-2013.gif

    如果图片作为背景时候要求是否重复平铺,平铺方向等我们都需要background-position和background-repeat配合使用

  • 相关阅读:
    Docker入门之二镜像
    巧用Freemarker的自定义方法
    freemarker空值的多种处理方法
    ContextLoaderListener与DispatcherServlet所加载的applicationContext的区别
    Mingyang.net:自定义FreeMarkerView
    hibernate one-to-many many-to-one 双向注解
    Mingyang.net:Controller必需是public吗?
    Mingyang.net:org.springframework.context.annotation.ConflictingBeanDefinitionException
    Mingyang.net:No identifier specified for entity
    jQuery:find()及children()的区别
  • 原文地址:https://www.cnblogs.com/zhengyan/p/5211882.html
Copyright © 2020-2023  润新知