• 2021.4.6


    今日学习内容:

      第一天  第二天 第三天  第四天  第五天 
    所花时间(小时) 4.5  6      
    代码量(行) 500  300      
    博客量(篇) 1  1      
    了解到的知识点

    html的多场景应用练习

     CSS背景图像、背景重复

         

    CSS 背景图像

    CSS 背景图像

    background-image 属性指定用作元素背景的图像。

    默认情况下,图像会重复,以覆盖整个元素。

    实例

    页面的背景图像可以像这样设置:

    body {
      background-image: url("paper.gif");
    }

    实例

    本例展示了文本和背景图像的错误组合。文字难以阅读:

    body {
      background-image: url("bgdesert.jpg");
    }

    注意:使用背景图像时,请使用不会干扰文本的图像。

    还可以为特定元素设置背景图像,例如 <p> 元素:

    实例

    p {
      background-image: url("paper.gif");
    }

    CSS background-repeat(背景重复)

    默认情况下,background-image 属性在水平和垂直方向上都重复图像。

    某些图像应只适合水平或垂直方向上重复,否则它们看起来会很奇怪,如下所示:

    实例

    body {
      background-image: url("gradient_bg.png");
    }

    如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;),则背景看起来会更好:

    实例

    body {
      background-image: url("gradient_bg.png");
      background-repeat: repeat-x;
    }

    提示:如需垂直重复图像,请设置 background-repeat: repeat-y;

    CSS background-repeat: no-repeat

    background-repeat 属性还可指定只显示一次背景图像:

    实例

    背景图像仅显示一次

    body {
      background-image: url("tree.png");
      background-repeat: no-repeat;
    }

    在上例中,背景图像与文本放置在同一位置。我们想要更改图像的位置,以免图像过多干扰文本。

    CSS background-position

    background-position 属性用于指定背景图像的位置。

    实例

    把背景图片放在右上角:

    body {
      background-image: url("tree.png");
      background-repeat: no-repeat;
      background-position: right top;
    }
  • 相关阅读:
    Ruby on Rails Tutorial笔记
    Gollum安装
    适合新手学习的Rails开源项目
    Rails开发网站流程
    解决Rails找不到Javascript的错误
    工具汇总
    BrowserCMS安装
    Head First Html, CSS, Xhtml
    在80端口运行Rails server
    Ubuntu下安装Balsamiq Mockups
  • 原文地址:https://www.cnblogs.com/marr/p/14904781.html
Copyright © 2020-2023  润新知