CSS背景

最新推荐文章于 2024-10-06 15:38:21 发布

dilidili131

最新推荐文章于 2024-10-06 15:38:21 发布

阅读量116

点赞数

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

本文链接：https://blog.csdn.net/qq_40619550/article/details/118160149

版权

前端html / css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中背景样式的使用，包括背景颜色、背景图片设置、平铺方式（no-repeat, repeat-x, repeat-y）、位置调整以及背景固定。还讲解了背景的简写形式、透明度、缩放和如何设置多背景图片，帮助开发者更好地控制网页元素的视觉效果。

摘要由CSDN通过智能技术生成

CSS可以添加背景色和背景图片，以及来进行图片设置。

属性	解释
background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	北京位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background：背景颜色背景图片地址背景平铺背景滚动北京位置

背景图片（image）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 1000px;
            height: 1000px;
            background-color: pink;
            background-image: url(image/bg.jpg);
        }
    </style>
</head>
<body>
    <div></div>
</body>

</html>

在这里插入图片描述

背景平铺（repeat）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 1000px;
            height: 1000px;
            background-color: pink;
            background-image: url(image/bg.jpg);
            background-repeat: no-repeat;
            /* background-repeat: repeat-x;
            background-repeat: repeat-y; */
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

no-repeat不平铺
reapeat-x沿x方向平铺
repeat-y沿y方向平铺

背景位置（poosition）

语法：

background-position : length || length
background-position : position || position

参数：
length：百分数 | 由浮点数字和单位标识符组成的长度值
position ： top | center || bottom || left || right

说明：
设置或检索对象的背景图像位置必须先指定background-image属性。默认值为（0%，0%）
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

注意：

position后面是x坐标和y坐标，可以使用方位名词或者精确单位
如果精确单位和方位名词混合使用，则必须是x坐标在前，y坐标在后。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 1000px;
            height: 1000px;
            background-color: pink;
            background-image: url(image/bg.jpg);
            background-repeat: no-repeat;
            /* 1.利用方位名词 top bottyom left right center ,被省略默认为居中center*/
            /* background-position: center center; */
            /* 2.利用精确单位，先x后y*/
            /*background-position: 10px 10px;*/
            /* 3.混搭*/
            background-position：10px center；
            
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

1.利用方位名词
在这里插入图片描述
2.利用精确单位，先x后y
3.混搭

背景附着（固定）

语法：

语法：background-attachment : scroll（默认） | fixed

参数
scroll ：背景图像随对象内容滚动
fixed ：背景图像固定

背景简写

语法：

background{ 背景颜色背景图片地址背景平铺背景滚动背景位置}

background:transparent url(bg.png) repeat-y scroll 50% 0;

背景半透明

语法：

background: rgba(0,0,0,0.5)

背景缩放

参数设置：

可以设置长度单位px或者百分比（设置百分比时参照盒子的宽高）
设置为cover时，会自动调整比例，保证图片始终填充满背景区域，如有溢出部分则隐藏
设置为contain时会自动调整比例，保证图片始终完整显示在背景区域。

语法：

background-size： 10px 20px；/精确长宽先宽后高尽量只改一个值防止尺寸比例更改/
background-size：50% ； /图片百分比大小/
background-size：contain；
background-size：cover；

多背景图片

以逗号分隔可以设置多背景，可用于自适应布局

一个元素可以设置多重背景图像
每组属性间使用逗号分隔
如果设置的的多重背景之间存在交集，前面的会覆盖后面的
为了避免背景色将图像盖住，背景色通常设置在最后一组上。

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       body {
           background-color: skyblue;
       }
       
       div {
           width: 300px;
           height: 300px;
           background: url(image/bg.jpg) no-repeat top left, 
           					hotpink url(image/bg.jpg) no-repeat top right;
           background-size: 100px 100px;
       }
   </style>
</head>

<body>
   <div></div>
</body>

</html>