• CSS background 属性


    可以按顺序设置如下属性(可点击进入相应的css手册查看使用)

    background-color 背景颜色
    background-image 背景图片
    background-repeat 背景重复
    background-attachment 背景图片是固定还是滚动
    background-position 背景图片的定位

    接下来我们重点来讲解css background通常的使用方法
    首先我们来看下面一段代码
    background:url(bgimg.gif) no-repeat 5px 5px;
    如下图解释
     

    background-size:cover;可以实现背景图片适应div的大小。

    background-size有3个属性:

    1. auto:当使用该属性的时候,背景图片将保持100% 的大小显示,不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时,图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。

    2. cover:当使用该属性时,图片将被缩放至恰好能覆盖div,并且图片被隐藏的部分最少,这种属性在大图背景中应用比较广泛。这点比较难理解,需要结合实践理解。

    3. contain:当使用该属性时,图片被缩放至最大且能被完全展示出来,但是由于图片的的尺寸比例与div的尺寸比例会有不同,所以当图片不能盖住div时,图片会自动平铺。



  • 相关阅读:
    html的标签3
    html的标签2
    html的标签
    html与css的关系
    Linux下安装和使用MySQL(五)
    js 判断字符串中是否包含某个字符串
    CSS控制文字,超出部分显示省略号
    CSS font-family 各字体一览表
    Jquery获取html标签,包含该标签本身
    swiper实现匀速无缝滚动
  • 原文地址:https://www.cnblogs.com/TinHead/p/8058240.html
Copyright © 2020-2023  润新知