HTML——背景属性

最新推荐文章于 2024-06-20 00:58:51 发布

蜡笔小欣丫

最新推荐文章于 2024-06-20 00:58:51 发布

阅读量2.4k

点赞数 1

文章标签： css html Powered by 金山文档

本文链接：https://blog.csdn.net/Sweet_LH/article/details/128658431

版权

一、背景属性

1.背景颜色

background-color

2.背景图片

background-image:url():

3.背景平铺（默认平铺）

background-repeat

background-repeat:no-repeat/repeat/repeat-x/repeat-y;

repeat-x:x轴平铺

repeat-y:y轴平铺

no-repeat:不平铺

4.背景图片定位

background-position

background-position:水平位置垂直位置;可以给负值

5.图片大小

background-size

背景图片的大小：400px 400px/100% 100%

contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子，留白

background-size: contain;

cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。也许无法显示在定位区域中

background-size: cover;

6.背景图片的固定

background-attachment : scroll(滚动)/ fixed (固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了);

二、代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>     
    /* 默认平铺
        repeat-x:x轴平铺
        repeat-y:y轴平铺
        no-repeat:不平铺 */
        .box1{
            height: 2000px;
            width: 200px;
            background-color: violet;
            background-image: url(qianxun.jpg);
            background-repeat: no-repeat;
            background-position:top;
            background-size:auto; 
            
            /* margin:两个参数，第一个表示上下边距，第二个表示左右编辑
            0：上下边界为0。 auto：第一个表示上下边距，第二个表示左右编辑 */
            margin: 0 auto;

            background-attachment: fixed;
        }
        .box2{
            height: 2000px;
            width: 500px;
            /* 背景颜色 */
            background-color: teal;
            /* 背景图片 */
            background-image: url(baidu.png);
            /* 背景图片的定位：background-position:水平位置垂直位置;可以给负值 */
            background-position:left top;
            /* 背景图片的平铺：background-repeat:no-repeat/repeat/repeat-x/repeat-y; */
            background-repeat: no-repeat;
           
            /* 背景图片的大小：400px 400px/100% 100% */

            /* contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子，留白 */
            /* background-size: contain; */

            /* cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。也许无法显示在定位区域中 */
            /* background-size: cover; */

            background-size: auto; 
            
            /* 背景图片的固定：background-attachment : scroll(滚动)
            / fixed (固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了); */
            background-attachment:fixed;
            /* background-attachment: scroll; */
        }
   
    </style>
</head>
<body>
    <div class="box1">
        大家好
    </div>

    <div class="box2">

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

蜡笔小欣丫

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML——背景属性

background-attachment : scroll(滚动)/ fixed (固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了);contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。也许无法显示在定位区域中。背景图片的大小：400px 400px/100% 100%repeat-x:x轴平铺。repeat-y:y轴平铺。no-repeat:不平铺。3.背景平铺（默认平铺）
复制链接

扫一扫