zoukankan      html  css  js  c++  java
  • style="background-image: url(__HOMEPAGE__/views/IMJ2V2/images/banner2.jpg)"

    style="background-image: url(__HOMEPAGE__/views/IMJ2V2/images/banner2.jpg)"

    一、问题

    background:url(../images/list01.png) no-repeat 0 center;
    background:url(../images/bg.png) no-repeat -4px -3px;
    这里面的后面两个值是什么意思0 center和 -4px -3px?

    二、解答

    background:url(../images/list01.png) no-repeat 0 center;
    的意思是 图像地址 不重复 水平位置0 垂直位置居中

    0 center 的意思就是 水平位置0 垂直位置居中
    -4px -3px 的意思就是 水平位置-4px 垂直位置-3px

    这两个值和background-position 属性是一样的,即设置背景图像的起始位置。
    这个属性设置背景原图像的位置,背景图像如果要重复,将从这一点开始。
    默认值:0% 0%
    可能的值
    top left
    top center
    top right
    center left
    center center
    center right
    bottom left
    bottom center
    bottom right (以上,如果您仅规定了一个关键词,那么第二个值将是"center"。)

    x% y% ( 第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。)

    mpx npx (第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS单位。如果您仅规定了一个值,另一个值将是50%。)

    您可以混合使用 % 和 position 值。


    1、“background:url(../images/list01.png) no-repeat 0 center”。

    使用list01图片设置为背景,并且不重复,显示在x轴为0,y轴的居中位置;

    2、background:url(../images/bg.png) x;

    这样设置会隐藏掉部分图片,往左偏离3个像素、往上偏离4个像素。

     

    CSS background-position 属性

    如何定位背景图像:

    浏览器支持:

    定义和用法:

    background-position 属性设置背景图像的起始位置。

    这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

    提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

    可能的值:

  • 相关阅读:
    第三方驱动备份与还原
    Greenplum 解决 gpstop -u 指令报错
    yum安装(卸载)本地rpm包的方法(卸载本地安装的greenplum 5.19.rpm)
    Java JUC(java.util.concurrent工具包)
    netty 详解(八)基于 Netty 模拟实现 RPC
    netty 详解(七)netty 自定义协议解决 TCP 粘包和拆包
    netty 详解(六)netty 自定义编码解码器
    netty 详解(五)netty 使用 protobuf 序列化
    netty 详解(四)netty 开发 WebSocket 长连接程序
    netty 详解(三)netty 心跳检测机制案例
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/8871592.html
Copyright © 2011-2022 走看看