[CSS]CSS background属性

最新推荐文章于 2023-03-06 16:33:38 发布

Feathers .

最新推荐文章于 2023-03-06 16:33:38 发布

阅读量648

点赞数

分类专栏： Web前端文章标签： css background

本文链接：https://blog.csdn.net/xf616510229/article/details/53746565

版权

Web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

CSS Background 属性

CSS Background 属性

background-color

背景颜色属性

表示颜色的三种方法

background-color:red;
background-color: rgb(255,0,0);
十六进制表示法 background-color: #ff0000; 2的8次方为256 刚好可以使用16进制代替RGB表示颜色
十六进制表示法，简写：

    #000   黑
    #fff    白
    #f00   红
    #333   灰
    #222   深灰
    #ccc   浅灰

background-image

背景图片设置，background-image:url(images/wuyifan.jpg);
url：uniform resouces locator 统一资源定位符

这里写图片描述

注意： padding区域可以被背景图覆盖，margin则不可以
背景图片会自动重复平铺

background-repeat

上面我们说了，背景会自动重复，平铺，这个属性就是设置背景重复方式的。

background-repeat:no-repeat;   /*不重复*/
background-repeat:repeat-x;    /*横向重复*/
background-repeat:repeat-y;    /*纵向重复*/

background-position

background-position:向右移动量向下移动量;
向上和向左移动为负数。

也可以使用英文单词代替移动量，就像color一样，
background-position: 描述左右的词儿描述上下的词儿;
描述左右的词儿： left、 center、right
描述上下的词儿： top 、center、bottom
如：让背景显示在左上方：background-position: left top;

示例：

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>CSS background-position</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 55px;
            height: 85px;
            background-position: -134px -196px;
            background-image: url(zimubiao.jpg)
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

这里写图片描述

运行结果：

这里写图片描述

CSS小精灵

“css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
css精灵有什么优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。

background-attachment

背景是否与滚动条关联，fixed，固定（不关联），背景不会随着滚动条滚动而滚动。默认是关联的，会随着滚动条滚动而滚动。

background-attachment:fiexd;

background综合属性

background:red url(1.jpg) no-repeat 100px 100px fixed;

等同于：

    background-color:red;
    background-image:url(1.jpg);
    background-repeat:no-repeat;
    background-position:100px 100px;
    background-attachment:fixed;