CSS【background+url路径写法（同一路径或不同路径）】

最新推荐文章于 2024-06-25 10:20:33 发布

-cc- Lynn

最新推荐文章于 2024-06-25 10:20:33 发布

阅读量1.3w

点赞数 12

分类专栏： web 文章标签： css 前端 html

本文链接：https://blog.csdn.net/Lynntureture/article/details/125643345

版权

web 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

分隔符CSS 背景

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color
background-image
background-repeat
background-attachment
background-position

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                background-color:lightblue;
            }
        </style>
    </head>
    </body>
    <h1>我的Web 页面</h1>
    <h3>欢迎来到我的世界！</h3>
    </body>
    </html>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
           h1{
                background-color:lightblue;
            }
            div{
                background-color:coral;
            }
            p{
                background-color: beige;
            }
        </style>
    </head>
    </body>
    <div>
        <p>this is p</p>
         <h1>我的Web 页面</h1>
    </div>
    <p>欢迎来到我的世界！</p>
    </body>
    </html>

背景图像

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

尽量把图片放置在与.html文件同一目录下【我自己在写background-image的时候，把网页文件和图片放到两个不同文件夹中，需要加../同一级/图片】

路径的不同写法
1.（无）开头表示当前目录下的
2.（/）开头的目录表示该目录为根目录的一个子目录
3.（./）开头的目录表示该目录为当前目录（当前目录所在的目录）的一个子目录
4.（../）开头的目录表示该目录为当前目录的父目录
5.（//）开头的目录表示和当前页面使用同一种协议http/https

路径中斜杠和反斜杠的用法
Unix使用斜杆/ 作为路径，而web应用最新使用在Unix系统上面，所以目前所有的网络地址都采用斜杆/ 作为分隔符。

Windows由于使用斜杆/ 作为DOS命令提示符的参数标志了，为了不混淆，所以采用反斜杠\ 作为路径分隔符。所以目前windows系统上的文件浏览器都是用反斜杠\ 作为路径分隔符。斜杆和反斜杠在大多数情况下可以互换，没有影响。

知道这个背景后，可以总结一下结论：

（1）浏览器地址栏网址使用斜杆/ ;

（2）windows文件浏览器上使用反斜杠\ ;

(3) 出现在html url() 属性中的路径，指定的路径是网络路径，所以必须用斜杆/ ;

（4）出现在普通字符串中的路径，如果代表的是windows文件路径，则使用斜杆/ 和反斜杠\ 是一样的；如果代表的是网络文件路径，则必须使用斜杆/ ;

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                background-image: url("http://static.runoob.com/images/mix/gradient2.png");
            }
        </style>
    </head>
    </body>

    </body>
    </html>

这样的布局显得很不协调，所以我们需要对图片如何平铺进行设置，如果图像只在x轴方向平铺 (repeat-x), 页面背景会更好些:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                background-image: url("http://static.runoob.com/images/mix/gradient2.png");
                background-repeat: repeat-x;
            }
        </style>
    </head>
    </body>

    </body>
    </html>

背景图像- 设置定位与不平铺

让背景图像不影响文本的排版

如果你不想让图像平铺，你可以使用 background-repeat 属性:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                background-image: url("image/color.jpg");
                background-repeat: no-repeat;
            }
        </style>
    </head>
    </body>
    </body>
    </html>

为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

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

            body{
                background-repeat:no-repeat;
                background-position:right;
            }

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 "background":

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

以上属性无需全部使用，你可以按照页面的实际需要使用.

背景-固定图像

图像不会随着页面的其他部分滚动。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                background-image:url('http://static.runoob.com/images/mix/smiley.gif');
                background-repeat:no-repeat;
                background-position:left top;
                background-attachment: fixed;
            }
        </style>
    </head>
    </body>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    <h1>111111111111111</h1>
    </body>
    </html>