background系列属性（background-color背景颜色、background-image背景图片、background-repeat重复方式以及background-position）

最新推荐文章于 2023-08-10 12:30:03 发布

正在修炼web的小芮

最新推荐文章于 2023-08-10 12:30:03 发布

阅读量1.2k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_71814235/article/details/125663903

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

background-color背景颜色

背景颜色属性。

css2.1中，颜色的表示方法有哪些？一共有三种：单词、rgb表示法、十六进制表示法

用英语单词来表示：

能够用英语单词来表述的颜色，都是简单颜色。

用rgb方法来表示：

rgb表示三原色“红”red、“绿”green、“蓝”blue。光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。

用逗号隔开。r、g、b的值，每个值的取值范围0~255，一共256个值。16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。

十六进制表示法：

ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);

十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;

    <style>
        .tit{
            color: red;
            /* color: rgb(255, 0, 0);
            color: rgba(255, 0, 0, 0.7);
            color: rgba(255, 0, 0, .7);
            color: #ff0000;
            color: #f00; */
        }
    </style>
</head>
<body>
    <h1 class="tit">心态</h1>
</body>

预览图

background-image背景图片

给盒子添加背景图片

background-image: url('./img/1.jpg');

url()表示网址，uniform resouces locator 同意资源定位符。

background-image的特点：

a). 背景天生是会被平铺满的。

b). padding的区域有背景图。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 600px;
            border: 6px solid pink;
            padding: 20px;
            /* 背景图 */
            /* background-image: url('./images/bjt.jpeg'); */
            background-image: url('./images/2.gif');
            /* 平铺方式 */
            /* background-repeat: no-repeat; */
            /* background-repeat: repeat-x; */
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

预览图

background-position背景定位

设置背景定位

position就是“位置”的意思。background-position就是背景定位属性。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 600px;
            border: 6px solid pink;
            padding: 20px;
            /* 背景图 */
            /* background-image: url('./images/bjt.jpeg'); */
            background-image: url('./images/2.gif');
            /* 平铺方式 */
            background-repeat: no-repeat;
            /* 背景定位 */
            background-position: 100px 100px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

预览图

正在修炼web的小芮

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
background系列属性（background-color背景颜色、background-image背景图片、background-repeat重复方式以及background-position）

background系列属性（background-color背景颜色、 background-image背景图片以及background-position背景定位）
复制链接

扫一扫