背景的属性

最新推荐文章于 2023-12-09 20:46:35 发布

我是打工人

最新推荐文章于 2023-12-09 20:46:35 发布

阅读量1.5k

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/szydqq/article/details/123306280

版权

1.背景颜色

属性:background-color/background

属性追:英文单词、十六进制、rgb/rgba()

2.背景图片

属性:background-image

属性值:url()

- 当容器大于背景图片的时候背景图片默认会进行平铺

- 当容器等于背景图片的时候背景图片完整显示

- 当容器小于背景图片的时候背景图片只会显示一部分

注意

- 背景图片是css样式不占位置的设置背景图片必须要容器

- img是结构是占位置的

3.背景平铺属性

属性:background-repeat(重复)

属性值

- 不平铺 no-repeat

- 默认值平铺 repeat

- 了解:沿着一个方向平铺 repeat-x/y

4.背景图片的定位

属性:background-position

属性值

- 两个属性值之间用空格隔开

- 水平方向x: left right center

- 垂直反向y: top bottom center

- 还可以用常规的属性值数值+单位(正值、负值)

- 简写方式:当水平方向=垂直方向的时候可以简写一个属性值

5.背景固定

属性:background-attachment(位置固定)

属性值:

- scroll 默认值滚动的

- fixed 常用固定的

6.简写方式

属性:background

属性值:颜色图片平铺位置固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div{
            width: 500px;
            height: 500px;
            background: pink;
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg002.hc360.cn%2Fg6%2FM07%2FE7%2F11%2FwKhQr1QgUO-EF45SAAAAAFgYR_Q789.jpg..210x210.jpg&refer=http%3A%2F%2Fimg002.hc360.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645355428&t=24f3920b2cb36712343c5e1242ce30ef);
            background-repeat: no-repeat;
            background-position: center
        } */
        body{
            /* background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg002.hc360.cn%2Fg6%2FM07%2FE7%2F11%2FwKhQr1QgUO-EF45SAAAAAFgYR_Q789.jpg..210x210.jpg&refer=http%3A%2F%2Fimg002.hc360.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645355428&t=24f3920b2cb36712343c5e1242ce30ef);
            background-attachment: scroll; */
            background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg002.hc360.cn%2Fg6%2FM07%2FE7%2F11%2FwKhQr1QgUO-EF45SAAAAAFgYR_Q789.jpg..210x210.jpg&refer=http%3A%2F%2Fimg002.hc360.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645355428&t=24f3920b2cb36712343c5e1242ce30ef) repeat-y center fixed
        }
    </style>
</head>
<body>
    <div>
    </div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p> 
</body>
</html>