从零开始前端学习[9]:css中的背景样式background的使用

最新推荐文章于 2022-07-07 17:49:11 发布

^_^ 小小码nong

最新推荐文章于 2022-07-07 17:49:11 发布

阅读量1k

点赞数 1

分类专栏： # 1.从零开始挑战前端文章标签：背景样式 background 背景样式的使用背景复合样式背景

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78013677

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

css中的背景样式background的使用

background-color 背景颜色
background-image 背景图片
background-repeat 规定如何重复背景图片
background-position 规定背景图片的位置
background-attachment 背景关联属性
background-size
background: 综合样式的控制属性

注意：

在使用背景属性的时候，一定要给背景宽高

提示
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

background-color 背景颜色

background-color顾名思义，就是背景样式的颜色设置：
使用非常简单，主要区分的就是其后面的数值可以有很多种
使用：

background-color:#333344; //使用16进制
background-color:red; //使用英文名字设置
background-color:rgb(aa,bb,cc);  //使用rgb进行16进制颜色转换
background-color:rgba(11,22,33,0.5)  //增加了颜色的透明度
注意颜色透明度的数值是从0---1之间
background-color:#ccc rgb(22,22,22) rgba(22,44,66,0.4);

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
    <meta name="Generator" content="EditPlus®">    <!--编辑器的名称-->
    <meta name="Author" content="作者是谁">
    <meta name="Keywords" content="关键词">
    <meta name="Description" content="描述和简介">
    <style type="text/css">
        body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 {
            margin: 0;
        }

        ul, ol {
            margin: 0;
            list-style: none;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        * {
            margin: 0;
            padding: 0;
        }
        .main{
            width: 1200px;
            background-color: #84a3e3;
            border: 1px solid red;
            margin: 30px auto;
        }
        .main div{
            width: 100px;
            height: 100px;
        }
        .main .hex{
            background-color: #330033;
        }
        .main .english_color{
            background-color: red;
        }
        .main .rgb{
            background-color: rgb(55,66,77);
        }
        .main .rgba{
            background-color: rgba(11,22,33,0.5);
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="hex">
            使用16进制颜色
        </div>
        <div class="english_color">
            使用英文名字
        </div>
        <div class="rgb">
            使用rgb进行颜色设置
        </div>
        <div class="rgba">
            使用rgba进行颜色设置
        </div>
    </div>

</body>
</html>

如下所示:

这里写图片描述

background-image 背景图片的加载

背景图片的加载，使用的是url进行加载，注意url是小写，并且内部是有引号的

background-image:url("图片的路径");
background-image:none;//表示不去加载背景图片

注意：加载的路径可以使本地绝对路径，相对路径，以及网络路径等，具体看项目需求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
    <meta name="Generator" content="EditPlus®">    <!--编辑器的名称-->
    <meta name="Author" content="作者是谁">
    <meta name="Keywords" content="关键词">
    <meta name="Description" content="描述和简介">
    <style type="text/css">
        body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 {
            margin: 0;
        }

        ul, ol {
            margin: 0;
            list-style: none;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .main{
            width: 1200px;
            background-color: rgba(33,44,55,0.5);
            margin: 20px auto;
        }
        .main .content{
            width: 450px; ;
            height: 684px;
            background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505668587341&di=bd80b10b1e9b3815599c80fc05799cd4&imgtype=0&src=http%3A%2F%2Fupload.newhua.com%2F2012%2F0601%2F1338536906276.jpg");
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="content">

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

这里写图片描述

background-repeat 规定如何重复背景图片

background-repeat:主要是规定了显示图片是否重复的属性，
在前面一个案例中，主要是我设置的宽高刚刚好是图片本身的宽高，如果盒子的尺寸设置为大于图片的尺寸，这个时候就是默认会平铺
如只是将类content的宽高属性修改完，

.main .content{
            width: 800px; ;
            height: 800px;
            background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505668587341&di=bd80b10b1e9b3815599c80fc05799cd4&imgtype=0&src=http%3A%2F%2Fupload.newhua.com%2F2012%2F0601%2F1338536906276.jpg");
        }

显示的效果如下：
这里写图片描述

可以看到当图片不足以铺满完整的盒子的时候，会默认的沿着x和y轴的方向去平铺，注意：这个平铺的属性值是默认的

下面就看下background-repeat的属性值

background-repeat:no-repeat;//取消平铺属性
background-repeat:repeat;//沿着x轴和y轴的方向去平铺
background-repeat:repeat-x;//沿着x轴的方向平铺，
background-repeat:repeat-y;//沿着y轴的方向上去平铺

注意：no-repeat属性值一般不是单独去使用的，因为当外部盒子过大的时候，图片不能铺满的话，这个时候就会凸显出内部图像与外部盒子的边框之间的界限，UI显示上面会显得low的一笔

background-position 规定背景图片的位置

重点提示：background-position在图标选择中的作用及其重要，或者重要的一笔。
background-position:也叫图片定位，可以定位图标的位置

background-positiond属性值：
1:使用关键字：top,bottom,left,right,和center两两组合来实现
如果只是出现一个关键字，则默认另外一个为center
2：使用百分比来，参考的原长为父级的宽高的长度
    background-position:20% 30%;父级宽度的百分之20，父级高度的30%
3：使用具体的数值来进行定位：
    background-position:20px 30px;//第一个为x轴方向，第二个为y轴方向

注意：使用具体定位的时候，其参考的初始点为原点，即最左侧定角的坐标为0，0;(注意定位的正负方向性，这个可以使用浏览器调节)

实例图片:
这里写图片描述
实例代码如下所示：

<!doctype html>
<html>
    <head lang="en">
        <meta charset="utf-8" />
        <title>实例代码</title>
        <meta name="Keywords" content="" />
        <meta name="Description" content="" />
        <link rel="stylesheet" href="" />
        <link rel="shortcut icon" type="image/x-icon" href="" />
        <!-- <base target="_blank" /> -->
        <style type="text/css">
            body,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
            ul,ol{margin:0;list-style:none;padding:0;}
            a{text-decoration:none;color:inherit;}
            *{margin:0;padding:0;}

            body{
                background:gray;
            }

            .main{
                width:40px;
                margin:10px auto;
            }
            .main ul li a{
                display:block;
                height:40px;
                background:url("../images/1.png")no-repeat;
                margin-bottom:5px;

            }
            .main ul li #icon_1{
                background-position:-80px 280px;
            }
            .main ul li #icon_2{
                background-position:0px -200px;
            }
            .main ul li #icon_3{
                background-position:0px -240px;
            }
            .main ul li #icon_4{
                background-position:0px -320px;
            }
            .main ul li #icon_5{
                background-position:0px 0px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <ul>
                <li><a href="#" id = "icon_1"></a></li>
                <li><a href="#" id = "icon_2"></a></li>
                <li><a href="#" id = "icon_3"></a></li>
                <li><a href="#" id = "icon_4"></a></li>
                <li><a href="#" id = "icon_5"></a></li>
            </ul>
        </div>
        <hr>
        素材
        </br>
        <div><img src="../左侧菜单.png" alt="" /></div>
    </body>
</html>

显示如下：
这里写图片描述

background-attachment 背景关联属性

background-attachment主要的含义就是背景与页面进行关联

主要的属性值有以下两个
scroll 默认值，背景图片会随着页面的滚动而进行滚动
fixed  当其余页面进行滚动的时候，背景图片是不会进行滚动的

其实脱离了文档流，但是等于是在父级的上的位置，父级在滚动的时候，
scroll会跟着父级的滚动也会一起滚动，而fixed属性值则不会跟着父级滚动而滚动

这里不进行演示，有时候确实也会在牛皮藓广告中偶尔会用到

background-size图片的尺寸信息

我们背景图片的尺寸，第一个字是x轴方向的，第二个字呢是我们的Y轴方向

background-size:主要可以有四个属性的值
1:background-size:100px 200px;  //具体的数值，第一个是宽，第二个是高
2:background-size:10% 20%;   //按照父级的百分比来计算
3:background-size:cover;  //图片按照等比例放大，直到覆盖整个盒子为止
4:background-size:contain; //图片也是等比例放大，直到遇到一条边为止

以上属性值比较常用的大概是contain或者cover；至于宽高一般直接给了父级。

background: 综合样式的控制属性

background与margin或者padidng一样，也是有着复合属性的，复合属性的，其复合属性的属性，大概可以也就是将上述的属性综合起来，然后写在一起罢了

background:background-color background-image background-repeat background-position/backrgound-size;

如下使用方式:

    background:red url("../images/1.jpg")no-repeat 20px 30px/cover;

    background: deeppink url("images/1.jpg")no-repeat center/cover;

    background: deeppink url("images/1.jpg")no-repeat 0 0/cover;

具体实例就不演示了，其使用很简单，主要就是要简单的背一下。

欢迎持续访问博客

^_^ 小小码nong

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[9]:css中的背景样式background的使用

css中的背景样式background的使用background-color 背景颜色background-image 背景图片background-repeat 规定如何重复背景图片background-position 规定背景图片的位置background-attachment 背景关联属性background-sizebac
复制链接

扫一扫