css背景相关属性

最新推荐文章于 2024-06-04 14:56:07 发布

努力的小白o(^▽^)o

最新推荐文章于 2024-06-04 14:56:07 发布

阅读量51

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_61102549/article/details/131716527

版权

1.1背景颜色

属性名：background-color(bgc)

属性值：

注意：默认背景颜色是透明的

background-color:rgba(); rgba是红绿蓝三原色，a是透明度0-1

例子：rgba（0，0，0，0.5）

2.1背景图片

属性名：background-image（bgi）

属性值：background-image: url();

3.1背景平铺

属性名：background-repeat(bgr)

属性值：

取值	效果
repeat	(默认值)水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

4.1背景位置

属性名：background-position（bgp）

属性值：background-position:水平方向位置垂直方向位置

正数：向右向下移动；负数：向左向右移动

注意：背景色和背景图只在盒子里显示

5.1背景相关属性连写

属性名：background（bg）复合属性（一个属性连接各个值，值中间用空格隔开）

书写顺序：推荐：background：color image repeat position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            /* 不分先后顺序 背景色 背景图 背景平铺 背景位置 */
            /* 背景图位置如果是英文单词可以颠倒顺序 */
            background:pink url(./ceKCaW2HTWg8w.jpg) no-repeat center bottom ;

            /* 背景图位置是数值时x,y顺序不能颠倒 */
            background:pink url(./ceKCaW2HTWg8w.jpg) no-repeat 100px 50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

6.1(拓展)img标签和背景图片的区别

要写背景图需要盒子有高度，否则背景图不显示

img叫插入图（用来实现网页中比较重要的图片），background叫背景图

努力的小白o(^▽^)o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css背景相关属性

书写顺序：推荐：background：color image repeat position。属性名：background（bg）复合属性（一个属性连接各个值，值中间用空格隔开）img叫插入图（用来实现网页中比较重要的图片），background叫背景图。background-position:水平方向位置垂直方向位置。属性值：background-image: url();要写背景图需要盒子有高度，否则背景图不显示。正数：向右向下移动；注意：背景色和背景图只在盒子里显示。注意：默认背景颜色是。
复制链接

扫一扫