CSS背景

救救孩子吧8༼⍤༽

于 2023-09-15 09:57:05 发布

阅读量28

点赞数

分类专栏： html+css学习文章标签： css 前端

本文链接：https://blog.csdn.net/m0_49553751/article/details/132893942

版权

html+css学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

背景相关属性

背景颜色

属性名：background-color(bgc)
属性值：颜色取值：关键字、rgba、表示法、十六进制.....
注意点：

背景颜色默认值是透明：rgba(0,0,0,0)、transparent

背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景色</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            /* background-color:pink; */
            /* background-color: #ccc; */
            /* 红绿蓝三原色  a是透明度0-1 */
            /* background-color: rgba(0,0,0,0.5); */
            background-color: rgba(0,0,0,.5);
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

实现效果

背景图片

属性名：background-image(bgi)
属性值：background-image:url('图片的路径')
注意点

背景图片中的url可以省略引号

背景图片默认是在水平和垂直方向平铺的

背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图</title>
    <style>
        div{
            width: 400px;
            height: 400px;

            /* 背景图默认是平铺（复制）的效果 */
            background-image: url(./imgs/1.jpg);
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

实现效果

背景图平铺方式

属性名：background-repeat(bgr)
属性值：

no-repeat：不平铺

repeat:平铺（默认效果）

repeat-x:水平方向平铺

repeat-y:垂直方向平铺

实现效果

不平铺

平铺效果

水平方向平铺

垂直方向平铺

代码

<!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: 800px;
            height: 800px;
            background-color: pink;
            background-image: url(./imgs/7.jpg);
            /* 不平铺：盒子的左上角显示一张背景图 */
            /* background-repeat: no-repeat; */

            /* 平铺效果 */
            /* background-repeat: repeat; */

            /* 水平方向平铺 */
            /* background-repeat: repeat-x; */

            /* 垂直方向平铺 */
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

背景图位置属性

属性名：backgrounf-position(bgp)
属性值：水平方向位置垂直方向位置

关键字：left center right top buttom

坐标（数字+px,正负都可以）

提示：

关键字取值方式写法，可以颠倒取值顺序

可以只写一个关键字，另一个方向默认为居中，数字只写一个值表示水平方向，垂直方向为居中

代码

<!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-color: pink;
            background-image: url(./imgs/8.jpg);
            background-repeat: no-repeat;

            /* 左上角 */
            /* background-position: 0 0; */
            /* background-position: left top; */

            /* background-position: right bottom; */

            /* 水平方向：正数向右移动，负数向左移动*/
            /* background-position: 50px 0; */
            /* background-position: -50px 0; */

            /* 垂直方向：正数向下移动，负数向上移动 */
            /* background-position: 0 100px; */
            /* background-position: 0 -100px; */

            /* background-position: 50px bottom; */

            /* 关键字写法水平垂直可以颠倒顺序 */
            /* background-position: bottom left; */

            /* 只写一个属性，另一个方向默认居中 */
            background-position:  bottom;


        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

背景图缩放

属性名：background-size
作用：设置背景图大小
常用属性值：

关键字:

cover:等比例缩放图片以完全覆盖背景区，可能背景图片部分看不见

contain:等比例缩放背景图片以完全装入背景区，可能背景区部分空白

百分比：根据盒子尺寸计算图片大小

数字+单位（例如：px）

代码

<!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: 500px;
            height: 300px;
            background-color: pink;
            background-image: url(./imgs/8.jpg);
            background-repeat: no-repeat;

            /* 如果图片宽高和盒子相等就停止缩放，可能导致盒子有空白 */
            /* background-size: contain; */

            /* 图片完全覆盖盒子，可能导致图片显示不全 */
            /* background-size: cover; */

            /* 表示图片的宽度与盒子宽度一样，图片的高度按照图片比例等比缩放 */
            background-size: 100%;
        }
    </style>
</head>
<body>
    <div>div标签</div>
</body>
</html>

背景图固定

作用：背景不会随着元素的内容滚动
属性名：background-attachment(bga)
属性值：fixed

背景复合属性

属性名：background(bg)
属性值：背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定（空格隔开各个属性值，不区分顺序）
代码

<!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(./imgs/8.jpg ) no-repeat center bottom/cover;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>