• CSS背景图片常见属性设置


    在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性:

    1)背景图片插入:background-image:url(位置及名称);  //默认在父级元素内的左上角

    2)背景平铺方式:background-repeat:no-repeat;   //不平铺     

    3)背景位置:background-position:right bottom;  //横向在右边,纵向在下边,即右下角
                                   center center;  //位于中心
                                   center right;  //中间靠右
                                   100px 200px;  //靠左100 靠上200

    4)背景尺寸:background-size:cover/contain/100% 100%  等比例缩放(铺满即可)/包含在里面/按盒子大小缩放

      注意:低版本的IE不支持背景尺寸

    5)背景显示方式:background-attachment:scroll//随屏幕滚动 fixed//固定在可视区域,注意:此时的位置是相对于可视区域的

                                    (fixed:这里有一个兼容性性的问题,在IE6中,只有html和body支持这个属性)

    6)在图片设置边距时注意IE6的双倍间距问题:同时有浮动和边距时产生双倍间距!

    解决方法: display:inline;//变为行内元素即可

    注意:网页中能够选中的图片就是插入的图片,否则就是背景图片!

    这里提一下css精灵技术:

        目的:主要是为了减少http请求次数

        核心思想:将多张图片合成为一张图片,然后通过背景属性中的定位来控制显示部分

         当然,这里只是css背景中常见的属性设置,还有一些没有涉及,就像一些默认值没有提到,

         另外如果还有一些重要但我没有提到的请大家回复一下,我会及时补充,谢谢!

  • 相关阅读:
    SFML从入门到放弃(3) 视角和碰撞检测
    SFML从入门到放弃(2) 图像和音频
    SFML从入门到放弃(1) 窗口和交互
    SFML从入门到放弃(0) 配置环境
    NOI2017 酱油记
    【bzoj4889】: [Tjoi2017]不勤劳的图书管理员 分块-BIT
    【bzoj4888】: [Tjoi2017]异或和 BIT-乱搞
    【bzoj4887】:[Tjoi2017]可乐 矩阵乘法,快速幂
    THUSC2017酱油记
    CTSC2017酱油记
  • 原文地址:https://www.cnblogs.com/wccc/p/6757161.html
Copyright © 2020-2023  润新知