背景

        1 背景颜色

        2 背景图片

        3 背景平铺

        4 背景位置

        5 背景相关属性连写

        6(拓展)img标签背景图片区别

            1 背景颜色

            属性名:backgroundcolor

            取值关键字rgb表示法、rgba表示法、十六进制

            注意:

                1 背景颜色默认值是透明:rbga(0,0,0,0)、transparent

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

            2 背景图片

                属性名:backgroundimage

                取值url(“图片路径“)

                注意:

                    1 背景图片url可以省略引号

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

                    3 背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开盒子的

            

            3 背景平铺

                属性名:backgroundrepeat

                取值

                    1 repeat     水平和垂直方向都平铺(默认)

                    2 norepeat  不平铺

                    3 repeatx   水平平铺 

                    4 repeaty   垂直平铺 

            

            4 背景位置

                属性名:backgroundposition

                取值backgroundposition:水平方垂直方向

                    1 方位名词(两两组合可以表示9个位置)

                        水平方向 左(left) 中(center) 右(right)

                        垂直方向 上(top) 中(center) 下(bottom)

                    2 数组+px(坐标表示)

                        原点(0,0) 盒子的左上角  x轴  y

                        注意:数值为正 正方向移动数值为负 反方向移动

                注意:无论是背景图片还是背景颜色都只在盒子里显示

                

            5 背景相关属性连写

                属性名:background

                连写:backgroundcolor image repeat position

                注意:

                    1 单个属性值的合写,取值之间以空格隔开

                    2 书写顺序不分先后,但推荐上述写法

                    3 取值个数可以按照需求省略

                    4 特殊情况:在pc端,如果盒子大小和背景图片大小一样,此时可以直接写 backgroundurl()

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

                需求需要网页展示一张图片效果

                    方法一:直接写上img标签即可

                        img标签一个标签,不设置宽高默认会以原尺寸显示

                    方法二:div标签 + 背景图片

                        需要设置div宽高,因为背景图片只是装饰的CSS样式,不能撑开div标签

                使用

                    不经常更换的用背景图

                    经常更换的用img图片

代码

<!DOCTYPE html>
<html lang="en"&gt;

<head&gt;
    <meta charset="UTF-8"&gt;
    <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    <title>Document</title>
    <style>
        div {
            /* 盒子宽800px 高800px */
            width: 800px;
            height: 800px;
            /* 字体大小 50px */
            font-size: 50px;
            /* 背景色 pink */
            /* background-color: pink; */
            /* 背景图 1.jpg */
            /* background-image: url("images/1.jpg"); */
            /* 背景平铺 默认 */
            /* background-repeat: no-repeat; */
            /* 背景图位置 居中 */
            /* background-position: center center; */
            /* 连写 颜色 图片 平铺 位置 */
            background: pink url("images/1.jpg") no-repeat center;
        }
    </style>
</head>

<body>
    <div>
        背景Demo
    </div>
</body>

</html>

效果图

原文地址:https://blog.csdn.net/weixin_54021642/article/details/131315188

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_20340.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注