zoukankan      html  css  js  c++  java
  • css3常用属性之 背景图片的尺寸、定位和多重背景图片

    背景图片的尺寸:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    body
    {
    background-image:url(images/bg_flower.gif);
    background-size:60px 100px;
    background-repeat:no-repeat;
    font-size:24px;
    color:#60F;
    }
    </style>
    </head>

    <body><br />
    <br />
    <br />
    <br />
    <br />
    <p>上面使用的是背景图片。下面是原始图片</p>
    <img src="images/bg_flower.gif" />
    </body>
    </html>

    背景图片的定位:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    body
    {
    font-size:24px;
    color:#60F;
    }
    div
    {
    border:1px solid black;
    padding:35px;
    background-image:url(images/bg_flower.gif);
    background-repeat:no-repeat;
    background-position:left;
    }
    #div1
    {
    background-origin:border-box;
    }
    #div2
    {
    background-origin:content-box;
    }
    </style>
    </head>

    <body>
    <p>background-origin:border-box;</p>
    <div id="div1">
    这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
    </div>

    <p>background-origin:content-box;</p>
    <div id="div2">
    这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
    </div>
    </body>
    </html>

    多重背景图片:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>

    <body style="background-image:url(images/bg_flower.gif), url(images/border.png); background-repeat:no-repeat;">
    </body>
    </html>

  • 相关阅读:
    JavaScript系列:《JavaScript高级程序设计》,chapter2, 在html中使用JavaScript
    Java系列:JVM指令详解(下)(zz)
    Java系列:JVM指令详解(上)(zz)
    Java系列:关于Java中的桥接方法
    REST: C#调用REST API (zz)
    Activiti系列:为什么Activiti 5.18 的REST的api总是返回404错误
    timeSeries db之:使用Metrics监控应用程序的性能 (zz)
    Java系列:国际化(zz)
    通过数据库方式访问excel 2007及其以后(xlsx)文件的连接字符串
    java系列:《java核心技术 卷1》学习笔记,chapter 11 调试技巧
  • 原文地址:https://www.cnblogs.com/bhmmlxieliming/p/6516620.html
Copyright © 2011-2022 走看看