zoukankan      html  css  js  c++  java
  • 前端之路从零开始——第二周第四天笔记(background)

    今天简单的梳理了一下有关于background的笔记,另外,大家写页面,用到图标、图片等,可以自己学一下利用PS软件进行简单的切图,另外给大家推荐一款PS特别好用的插件——蓝湖,利用它,可以很方便的抠图,量尺寸等,有兴趣的可以学习了解一下,我也只会简单的切图。好的,下面进入正题。

    1.background-color背景色的详解

    • background-color : 设置或检索对象的背景颜色,默认值:transparent;
    • 同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上

    2.background-image背景图的详解

    • background-image: 设置或检索对象的背景图像,默认值:none;
    • 如果设置了 ’ background-image ‘,同时也建议设置 ’ background-color ‘ 用于当背景图像不可见时保持与文本颜色有一定的对比度。
    • 如果定义了多组背景图,且背景图之间有重叠,写在前面的将会盖在写在后面的图像之上。

    3.background-repeat背景重复的详解

    • background-repeat: 设置或检索对象的背景图像如何铺排填充。必须先指定 ’ background-image ‘ 属性。默认值:repeat;
    • 允许提供2个参数,如果提供全部2个参数,第1个用于横向,第二个用于纵向;
    • repeat-x: 背景图像在横向上平铺
    • repeat-y: 背景图像在纵向上平铺
    • repeat: 背景图像在横向和纵向平铺
    • no-repeat: 背景图像不平铺

    4.background-attachment背景是否滚动的设置

    • background-attachment: 设置或检索背景图像是随对象内容滚动还是固定的。必须先指定 ’ background-image ‘ 属性。默认值:scroll
    • fixed: 背景图像相对于窗体固定。
    • scroll: 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
    • percentage: 用百分比指定背景图像填充的位置。可以为负值。
    • length: 用长度值指定背景图像填充的位置。可以为负值。
    • center: 背景图像横向和纵向居中。
    • left: 背景图像在横向上填充从左边开始。
    • right: 背景图像在横向上填充从右边开始。
    • top: 背景图像在纵向上填充从顶部开始。
    • bottom: 背景图像在纵向上填充从底部开始

    5.background-position背景定位的详解

    • background-position: 设置或检索对象的背景图像位置。必须先指定 ’ background-image ‘ 属性。 该属性提供2个参数值
    • 如果提供两个,第一个用于横坐标,第二个用于纵坐标。
    • 如果只提供一个,该值将用于横坐标;纵坐标将默认为50%(即center)

    6.背景的复合属性讲解

    background: 背景颜色、背景图片、背景平铺方式、背景是否滚动、背景定位。

  • 相关阅读:
    VS2008编写MFC程序--使用opencv2.4()
    November 02nd, 2017 Week 44th Thursday
    November 01st, 2017 Week 44th Wednesday
    October 31st, 2017 Week 44th Tuesday
    October 30th, 2017 Week 44th Monday
    October 29th, 2017 Week 44th Sunday
    October 28th, 2017 Week 43rd Saturday
    October 27th, 2017 Week 43rd Friday
    October 26th, 2017 Week 43rd Thursday
    October 25th, 2017 Week 43rd Wednesday
  • 原文地址:https://www.cnblogs.com/wangxingren/p/10050870.html
Copyright © 2011-2022 走看看