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

最新推荐文章于 2021-10-15 19:02:56 发布

new-SkyWaller

最新推荐文章于 2021-10-15 19:02:56 发布

阅读量77

点赞数

分类专栏：初级CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113774826

版权

初级CSS 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

背景 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>

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

new-SkyWaller

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的学习之路：初级CSS---背景 1

背景 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=
复制链接

扫一扫