zoukankan      html  css  js  c++  java
  • HTML 学习笔记 CSS样式(背景)

    背景色

    可以使用background-color属性为元素设置背景色 这个属性接受任何合法的颜色值。

    可以使用background-image属性来喂元素设置背景图片。

    背景重复

    如果需要在页面上对背景图进行平铺,可以使用background-repeat属性。

    属性值repeat导致图像在水平垂直方向上都平铺,repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。。

    默认的 背景图将从一个元素的左上角开始 。

    背景定位。

    可以利用background-position 属性来改变图像在背景中的位置。

    为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

    关键字

    图像防治关键字最容易理解,其作用如其名称所表明的 例如 top right 使图像防治在元素那边句区的右上角

    根据规范 关键字可以以任何顺序出现 只要保证不超过两个关键字 一个对应水平方向 一个对应垂直方向。

    如果只出现一个关键字 则认为另一个关键字是center

    也可以使用百分数值来定义position

    例如 background-position: 50%,50%;

    这会导致图像适当放置 其中心与其元素的中心对齐  换句话说 百分数值同时应用于元素和图像。也就是说 图像中描述为50% 50%的点 与元素中描述为50% 50%的点(中心点)对齐

    如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。

    长度值

    长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
    比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:

    背景关联

    如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
    您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:

    background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。

    例子

    1:设置背景颜色

    Demo.css
    
    body {
        background-color: yellow;
    }
    h1 {
        background-color: #00ff00;
    }
    h2 {
        background-color: rgb(250,0,250);
    }
    p.no2{
        background-color: gray; padding: 20px;
    }
    <html>
        <head>
            <meta charset="UTF-8">
            <title>背景</title>
            <link rel="stylesheet" type="text/css" href="CSS/demo.css" />
        </head>
        <body>
            <h1>这是标题1</h1>
            <h2>这是标题2</h2>
            <p>这是段落</p>
            <p class="no2">这个段落设置了内边距</p>
        </body>
    </html>

    2:设置背景图片

    body {
        /*background-color: yellow;*/
        background-image: url(../img/HBuilder.png);
        /*背景图不平铺*/
        /*background-repeat:no-repeat ;*/
        /*x方向平铺图片 repeat-y 垂直方向平铺背景图*/
        background-repeat: repeat-x;
        /*background-position:left top;*/
        /*设置背景图的位置*/
        background-position: 10px 10px;
        /*背景图不随视图的滚动而滚动*/
        background-attachment:fixed ;
        
    }

    background-repeat属性对应的值 和 他们的作用

    background-attachment属性对应的值 和 他们的作用

  • 相关阅读:
    81. Search in Rotated Sorted Array II (Array; Divide-and-Conquer)
    LeetCode Word Ladder
    LeetCode Word Search II
    LeetCode Invert Binary Tree
    LeetCode Implement Stack using Queues
    Bash:字符串操作
    LeetCode Basic Calculator
    LeetCode Rectangle Area
    Java 远程调试
    LeetCode Count Complete Tree Nodes
  • 原文地址:https://www.cnblogs.com/huanying2000/p/6179722.html
Copyright © 2011-2022 走看看