第二节 命名规范与css样式 | 第一章 |《前端体系学习 1.1》| PHP 技术论坛

1.背景

div{
          width:500px;
          height:500px;
          background-color: deeppink;/* 背景颜色 */
          background-image: url('./img/raoyue.jpg'); /* 引入图片 ：url就是路径； */
          /*background-size: 200px 200px;   背景大小 ：宽度 高度 */
          /*background-size:cover;  cover 覆盖   */
          /* background-repeat: repeat;   */

          background-repeat: no-repeat;  
          /* background-repeat: repeat-x;   */
          /* background-repeat: repeat-y;   */
          /* 
              背景是否平铺：
                  no-repeat:不平铺 
                  repeat : 默认值；
                  repeat-x:
          */  
          /* background-position: right center;   */
          /* background-position:0% 50%; */
          /* background-position:0px center; */
          /*
              背景定位 ：
                  默认在左上角:left top
                  水平方向：
                      left 、 center 、 right
                  垂直方向：
                      top 、 center 、 bottom
              单位：
                  可以为方向位left 、 center 、 right；top 、 center 、 bottom
                  可以为百分比；50%；0%；
                  可以为像素单位：100px 100px;
              水平与垂直可以混合使用；
          */
      }

background-size: 200px 200px;   /*背景大小 ：宽度 高度 */
background-size:cover;  
background-size:contain; 
/*cover：是按照等比缩放铺满整个区域。如果显示比例和显示区域的比例相差很大某些部分会不显示，比如长度比宽度大很多，则宽度左侧会有一部分不显示。(常用) 
100%：长宽100%显示，可能会拉升图片。 
contain：也是等比缩放，按照某一边来覆盖显示区域的，会有白边*/
background-attachment: fixed; /* 背景关联
scroll：背景图片附着在背景容器上，它是相对于背景容器（元素）固定，它会随着背景容器的滚动，而不是随着它的内容滚动（也可以看成是对元素边框固定）。
fixed： 背景图片附着在浏览器的可视区域。因为浏览器的可视区域不具备滚动的性格，所以它是不滚动的。
local：这是CSS3新增的属性值。背景图片附着在背景容器的内容区域。它会随着内容的滚动而滚动*/

背景复合写法

background:no-repeat   center right/200px 250px rgb(224, 31, 31) url('./img/xinyi.jpg');