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

    背景图片定位

    background-position属性可以给背景图片定位。

    background-position属性有两个值,第一个值是水平位置,第二个值是垂直位置。这两个值可以使用百分比来表示(50% 50% 表示垂直和水平都居中)。

    也可以使用下面的方式表示:

    • left top
    • left center
    • left bottom
    • center top
    • center center
    • center bottom
    • right top
    • rigth center
    • right bottom

    下面的代码演示了背景图像定位。

    <!DOCTYPE html>
    <html>
        <head>
            <title>图片定位</title>
            <style type="text/css">
                body {
                    background-image: url("https://www.liyongzhen.com//docs/images/spring-flower.png");
                    background-repeat: no-repeat;
                    background-position:center top;
                    color: #665544;
                    padding: 20px;}
                h1 {
                    color: white;}
            </style>
        </head>
        <body>
            <h1>软件开发,成就梦想</h1>
            <h2>学编程,上利永贞网 https://www.liyongzhen.com/</h2>
            <p>我们能为中国‘996’程序员做些什么?怎样才能能引起西方媒体和政府的关注?</p>
            <p>在程序员圈子里颇有名气的代码托管平台GitHub上,有人发起了一个名为“996.ICU”的项目,意为“工作996,生病ICU”,
            “996”即许多企业的程序员工作状态,从上午9点干到晚上9点,每周工作6天。这一项目得到了大量程序员的响应,自从3月26日注册以来,
            截至4月2日Star数已突破15万整数关口,表示至少有15万名程序员关注了这个项目。</p>
        </body>
    </html>
     
    图片来源 https://www.kisspng.com/
  • 相关阅读:
    关于MyEclipse项目的名字的修改对项目导入导出的影响
    关于SQL语句的一些注意事项
    关于Struts2的jsp页面的注释
    关于VS2013常用到的快捷键
    关于Cocos2d-x中定时器的使用总结
    关于Cocos2d-x中打包图集和使用方法
    zend studio 10.6.2 设置默认编码为UTF-8
    zend studio 10.6.2 字体大小 设置
    zend Studio10.6.2汉化
    JQ Ajax 上传文件
  • 原文地址:https://www.cnblogs.com/lsyw/p/10768711.html
Copyright © 2011-2022 走看看