zoukankan      html  css  js  c++  java
  • css背景图定位

    css背景图定位

    20%的功能满足80%的需求。爱、喜悦、和平。

    html代码

    <!DOCTYPE html>
    <html>
    <head>
        <title>css背景图定位</title>
        <meta http-equiv="content-type" content="utf-8"/>
        <style>
        div{34px;height:34px;border:solid 1px}
        #n1{background-image:url(bg_1.png);background-repeat:no-repeat;background-position:-35px -6px;}
        #n2{background-image:url(bg_1.png);background-repeat:no-repeat;background-position:34% 80%;}
        #n3{background-image:url(bg_1.png);background-repeat:no-repeat;background-position:center center;}
        </style>
    </head>
    <body>
        <div id="n1">
        </div>
        <div id="n2">
        </div>
        <div id="n3">
        </div>
    </body>
    </html>
    

      

    1、确定容器大小

    <style>
        div{widht:34px;height:34px;}
    </style>
    

      

    2、背景图片

    (1)引用图片

    background-image:url(bg_1.png);

    (2)是否重复

    background-repeat:no-repeat;

    (3)定位

    background-position:x y;
    x水平方向,y垂直方向。 默认向右向下为+。x、y为数值(px)时,移动图片;百分比(%)时,移动容器;center left right top bottom移动容器。

    点击下载

  • 相关阅读:
    php 发送手机验证码
    PHP 发送邮件
    php 图形验证码
    css 把图片变成灰色
    本地配置虚拟主机
    VMware 14 激活密钥
    linux每日命令(12): nl 命令
    linux每日命令(11): cat命令
    linux每日命令(10): touch命令
    linux每日命令(9): cp命令
  • 原文地址:https://www.cnblogs.com/xyws/p/4958970.html
Copyright © 2011-2022 走看看