前端的学习之路：初级CSS---背景 1

2021-02-09 20:01:15 阅读：161 来源： 互联网

标签：repeat 设置背景 --- 初级 CSS background position 背景图片

背景 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景 1</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.24.01.css"> -->
    <style>
        .box{
            width: 1000px;
            height: 800px;

            /* background-color 设置背景颜色 */
            background-color: #bfa;
            /* 
            background-image 设置背景图片
                -可以同时这只背景图片和背景颜色，这样背景颜色将会成为图片的背景色
                -如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
                -如果背景的图片大于元素，则背景图片的一个部分无法完全显示
                -如果背景图片和元素一样大，则会直接正常显示
            */
            background-image: url(../chujicss/chujicss\ img/11.15.1.jpg);

            /* 
            background-repeat 用来设置背景的重复方式
                    可选值：
                        repeat 默认值 ，背景会沿着x轴 y轴双方向重复
                        repeat-x沿着x轴方向重复
                        repeat-y沿着y轴重复
                        no-repeat 背景图片不重复
            */
            background-repeat: no-repeat;

            /* 
            background-position 用来设置背景图片的位置
                设置方式：
                        通过 top left right bottom 几个表示方位的词来设置背景图片的位置
                          使用方位词时必须要同时指定两个值，如果只写一个则表示第二个默认为center

                        通过偏移量来指定背景图片的位置
                            水平方向偏移量 垂直方向偏移量
                    
            */
            
            background-position:  right top;
            /*可以直接写像素*/
            /* background-position: 50px 200px; */
            /* background-position:100% 0; */

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

运行结果为：
在这里插入图片描述

标签：repeat,设置,背景,---,初级,CSS,background,position,背景图片
来源： https://blog.csdn.net/weixin_44647555/article/details/113774826

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端的学习之路：初级CSS---背景 1

背景 1