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>

  • 相关阅读:
    idea打包jar部署Linux出现乱码
    HTML元素刷新方式
    Linux中Jar启动与停止
    Win10开机自启软件设置
    java后台数据传输到前端少一天,8小时
    mysql字符串提取数组排序
    maven 配置文件
    mac docker安装jupyter notebook镜像
    pycharm使用git
    github使用命令
  • 原文地址:https://www.cnblogs.com/bhmmlxieliming/p/6516620.html
Copyright © 2011-2022 走看看