从零开始前端学习[31]:css3中新增加的一些背景属性

最新推荐文章于 2021-08-04 08:08:58 发布

^_^ 小小码nong

最新推荐文章于 2021-08-04 08:08:58 发布

阅读量510

点赞数 1

分类专栏： # 1.从零开始挑战前端文章标签：背景裁剪背景起始域 css3背景属性多背景设置背景尺寸设置

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

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

版权

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

57 篇文章 3 订阅

订阅专栏

css3中新增加的一些背景属性

1:背景属性回顾
2:css3中新增加的一些背景属性

2_1:background-size设置背景尺寸

2_2background-image设置多背景

2_3background-origin背景图片的其实域

2_4background-clip背景颜色显示区域

2_5background-color:中的相关属性值设置

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

背景属性回顾

background-image背景图片的设置:

background-image:url("images/1.jpg");

background-color背景颜色的设置

background-color:red;
background-color:rgb(44,55,66);
background-color:rgba(66,77,88,0.5);
background-color:#667778;

background-repeat背景图片是否需要循环平铺

background-repeat:no-repeat;

background-position背景图片的定位，需要注意的是位置的正负

background-position:30px -30px;

background-attachment:背景是否需要固定

background-attachment:fixed;
background-attachment:scroll;

详细的信息可以参考
从零开始前端学习[9]:css中的背景样式background的使用

css3中新增加的一些背景属性

background-size其实这个在之前应该是讲过的，即设置背景的尺寸大小

这个属性有三个值，一个数具体的数值，一个是cover，一个是contain

属性值	属性值的含义
x ,y	x表示水平方向，y表示垂直方向，值可以是像素，百分比，或者是auto
cover	保持宽高比不变，保证占满盒子，但是不一定能看到完全的图片
contain	保持宽高比不变，不一定能占满盒子，但是能看到完整的图片

background-image进行多背景设置

在以前的学习过程中，很多时候我们都只是给background设置一个背景，但是css3中，可以对background设置多个背景
具体使用如下所示:

background-image: url("1.jpg"),url("2.jpg") ;  //多个背景 以“，”隔开，不限个数

.main .box2 p{ background: url("img/1.jpg")no-repeat,url("img/2.jpg")no-repeat 100px 100px;}

从上述就可以看出，其实在设置背景的时候，用逗号进行分割后，被隔离出来的每一条都是一个完整的复合属性

<!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;margin: 20px auto;box-shadow: 0 0 15px 0 deeppink}
    .main div{box-shadow: 0 0 10px 0 green;margin-bottom: 10px;text-align: center}
    .main div h3{text-align: center}
    .main div p{width: 300px; height: 200px; margin: auto;
      background: url("2.jpg")no-repeat,url("1.jpg") no-repeat 100px 100px,url("3.jpg") no-repeat 50px 50px; box-shadow: 0 0 10px 0 #000;}

  </style>
</head>
<body>
  <div class="main">
    <div class="box1">
    <h3>background-image:多背景</h3>
    <p></p>
  </div>
</body>
</html>

显示效果如下所示，
这里写图片描述
注意需要将其的位置给错开，否则就会重叠在一起显示了

background-origin背景图片起始域

什么叫起始领域？？？对于一个盒子来说，它是由外边距，边框，内边距以及内容部分组成，那么对于整个起始于来说，其就有四个相对的参考点
background-origin主要是有3个属性值，border-box;padding-box;content-box;

属性值	属性值代表的含义
border-box	相对于边界线来说的，以边界线作为参考起始域
padding-box	相对于内边距来说的，以内边距作为初始域
content-box	相对于内容来说的，主要是以内容区域作为起始域

注意这里讲的起始域都是以最上侧开始的

使用如下:
    background-origin:padding-box;
    background-origin:content-box;
    background-origin:border-box;

<!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;margin: 20px auto;box-shadow: 0 0 15px 0 deeppink}
    .main div{box-shadow: 0 0 10px 0 green;margin-bottom: 10px;text-align: center}
    .main div h3{text-align: center}
    .main div p{width: 300px; height: 200px; margin: auto; background: url("2.jpg")no-repeat; box-shadow: 0 0 10px 0 #000;border: 20px solid rgba(33,55,66,0.5);padding: 10px;text-align: center}
    .main .box1 p{background-origin: border-box}
    .main .box2 p{background-origin: padding-box}
    .main .box3 p{background-origin: content-box}
  </style>
</head>
<body>
  <div class="main">
    <div class="box1">
    <h3>background-origin:borde-box</h3>
    <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
  </div>
    <div class="box2">
      <h3>background-size:padding-box</h3>
      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
    </div>
    <div class="box3">
      <h3>background-size:content-box</h3>
      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
    </div>
  </div>
</body>
</html>

这里写图片描述
注意：默认的情况之下就是根据padding-box来进行显示的

background-clip背景颜色显示区域

background-clip主要是背景颜色显示区域，而不是针对背景图片来说的，即是背景颜色从哪里开始进行显示
background-clip主要是有3个属性值，border-box;padding-box;content-box;
它会从起始显示的地方对原来的画布进行裁剪，只去显示画布内的东西，而画布之外的可能就不会在显示出来，这个需要结合background-origin来进行使用的时候会比较明显

属性值	属性值代表的含义
border-box	相对于边界线来说的，以边界线作为背景颜色的起始部分，默认的就是从border开始
padding-box	相对于内边距来说的，以内边距作为背景颜色的起始部分
content-box	相对于内容来说的，主要是以内容区域作为背景颜色的起始部分

使用如下:
    background-clip:padding-box;
    background-clip:content-box;
    background-clip:border-box;

<!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;margin: 20px auto;box-shadow: 0 0 15px 0 deeppink}
    .main div{box-shadow: 0 0 10px 0 green;margin-bottom: 10px;text-align: center}
    .main div h3{text-align: center}
    .main div p{width: 300px; height: 200px; margin: auto; background: deeppink; box-shadow: 0 0 10px 0 #000;border: 20px solid rgba(33,55,66,0.5);padding: 10px;text-align: center}
    .main .box1 p{background-clip: border-box}
    .main .box2 p{background-clip: padding-box}
    .main .box3 p{background-clip: content-box}
    .main .box4 p{ background:url("1.jpg") no-repeat;background-origin:border-box;background-clip: content-box}
  </style>
</head>
<body>
  <div class="main">
    <div class="box1">
    <h3>background-clip:border-box</h3>
    <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
  </div>
    <div class="box2">
      <h3>background-clip:padding-box</h3>
      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
    </div>
    <div class="box3">
      <h3>background-clip:content-box</h3>
      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
    </div>
    <div class="box4">
      <h3>background-clip:的裁剪效果</h3>
      <p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
    </div>
  </div>
</body>
</html>

显示效果如下所示：
这里写图片描述
从上面可以看到各个属性值的效果以及background-clip的裁剪效果

background-color:中的相关属性值设置

background-color:hsl(h,l,s)调色

以前background-color的使用后面都是直接跟颜色相关的属性值，但是在这里使用的是调色的效果。
H：Hue(色调)，取值为0-360；(120绿色，240蓝色；360或0会红色)
S：saturation饱和度，取值为0-100%
L：为亮度，取值为0-100%
其使用和以前一样，直接在后面添加属性即可，这里不做过多的赘述

 .main .box1 p{background-color: hsl(145,50%,50%)}

background：-webkit-linear-gradient线性渐变

线性渐变颜色linear-gradient();

第一个值是渐变方向，后面每一个值用逗号隔开，是颜色只写颜色的时候，平均分配渐变的

background：-webkit-linear-gradient(left,deeppink 10%,yellow 30%,blue 50%)

第一个参数为渐变方向的参数，left，right，top，bottom可以单独，也可以进行两两组合使用，其实没有center属性的
后面一个参数针对上述案例中来解释：
deeppink 10%，yellow 30% 是在10%之前，颜色为deeppink，不会渐变的，在10%到30%之间会发生渐变，第二次渐变是在30%-50%之间，在30%左右的时候是不会渐变的，在50%左右的时候也是不会渐变的

background：-webkit-radial-gradient径像渐变，类似从圆心开始

background：-webkit-radial-gradient (left,deeppink 10%,
yellow 30%, blue 100%)

渐变方向：right、left、top、bottom两两组合，可center，但必须单独使用,其实渐方向也是指定圆心的过程

注意:在使用时需要加上 –webkit-兼容前缀

对于以上几种简单的代码测试:

<!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;margin: 20px auto;box-shadow: 0 0 15px 0 deeppink}
    .main div{box-shadow: 0 0 10px 0 green;margin-bottom: 10px;text-align: center}
    .main div h3{text-align: center}
    .main div p{width: 300px; height: 200px; margin: auto; ; box-shadow: 0 0 10px 0 #000;}
    .main .box1 p{background-color: hsl(145,50%,50%)}
    .main .box2 p{background: -webkit-linear-gradient(left,red 10%,deeppink 20%,greenyellow 60%,blue 100%)}
    .main .box3 p{background: -webkit-radial-gradient(center,red 10%,deeppink 20%,greenyellow 60%,blue 100%)}
  </style>
</head>
<body>
  <div class="main">
    <div class="box1">
    <h3>background-color:hsl</h3>
    <p></p>
  </div>
    <div class="box2">
      <h3>background:-webkit-linear-gradient</h3>
      <p></p>
    </div>
    <div class="box3">
      <h3>background:-webkit-radial-gradient</h3>
      <p></p>
    </div>
  </div>
</body>
</html>