css背景属性 css background

1 背景属性

background-color背景颜色
在标准盒模型中，背景色会应用给整个内容区域（会应用到边框上）：width+padding2+border2
background-image背景图片，设置的图片是从padding开始渲染的，并且从border开始平铺渲染
背景色从border开始渲染
背景图片从padding开始渲染，并且从border开始平铺渲染。
background-repeat设置背景平铺，x水平方向，y垂直方向：
》 no-repeat不重复平铺
》 repeat重复平铺
》 repeat-x水平方向平铺
》 repeat-y垂直方向平铺
background-color: red;

div{
        width: 600px;
        height: 600px;
        /*background-color: red;*/
        /*background-image: url("yeye.jpg");*/
        /*background-repeat: no-repeat;*/
        /*background-position: 100px 50px;*/  相对于div标签的,距离左边100px,距离上面50px
        background:url("yeye.jpg") no-repeat left center;
        /*background-position: right top;*/

    }

简写方式,颜色 图片路径 是否平铺 图片位置 background:#ffffff url(‘1.png’) no-repeat
right top;
background-position用于背景定位，属性值分别表示：x方向坐标，y方向坐标：
》是从Padding开始（border以内）进行定位的
》 水平方向：left center right
》 垂直方向：top center bottom
》 百分比写法
》像素值写法
background-attachment用来固定背景：
》 scroll滚动页面，位置不变，相对窗口位置变化（默认值）
》 fixed滚动页面，位置变化，相对于窗口位置不变

        .demo {
            width: 400px;
            height: 4000px;
            padding: 100px;
            border: 50px dotted orange;
            margin: 100px;
            background-color: green;
            background-image: url(./image/1.PNG);
            background-repeat: no-repeat;
            /* 定位 */
            /* background-position: 100px; */
            background-position: center center;
            /* background-position: 50% 50%; */
            background-attachment: fixed;
        }

• 背景复合属性

background是一个复合属性，
可以设置背景色，背景图片，背景图片位置，背景图片平铺
在css3中还可以设置背景图片尺寸，背景图片起始位置，背景图片的截取，背景图片的定位
设置顺序：background 背景色，背景图片，背景平铺，背景定位，背景固定

        .demo {
            width: 400px;
            height: 4000px;
            padding: 100px;
            border: 50px dotted orange;
             /* 通过一个属性，实现效果  */
            background: green url("./image/1.PNG") no-repeat left top fixed;
        }

background-origin :背景起源，第一张图片绘制位置（背景图片）：
》 padding-box:相对于内边距框来定位（默认值）
》border-box:相对于边框盒来定位
》content-box:相对于内容框来定位
background-clip: 背景裁切（裁剪背景色与背景图片）：
》 border-box:裁剪到边框盒（默认值）
》padding-box:裁剪到内边距框
》 content-box:裁剪到内容区
background-size: 背景尺寸：
》 像素表示法
》 百分数表示法
》 单词表示法：cover表示覆盖，尽可能大，contain表示容纳，显示全部

        .box {
            margin: 100px;
            border: 100px dotted green;
            padding: 100px;
            width: 200px;
            height: 200px;
            font-size: 50px;
            color: orange;
            background-color: pink;
            background-image: url(./image/1.PNG);
            background-repeat: no-repeat;
            /* 更改图片的绘制位置 */
            /* 从边框绘制 */
            /* background-origin: border-box; */
            /* 从内容区绘制 */
            /* background-origin: content-box; */
            /* 默认值padding-box */
            /* background-origin: padding-box; */

            /* 背景平铺 */
            /* background-repeat: repeat; */
            /* 背景裁剪 */
            /* background-clip: padding-box; */
            /* background-clip:content-box; */
            /* 默认值 */
            /* background-clip: border-box; */

            /* 背景尺寸 */
            /* 像素 */
            /* background-size: 500px 200px; */
            /* 百分数 */
            /* background-size: 100% 50%; */
            /* 特殊变量 */
            /* background-size: cover; */
            /* background-size: contain; */
        }

背景和SEO

搜索引擎认识语义化标签，所以为了提高网站的权重，我们通常将重要的信息写在h1中，有时候这些重要的信息是一些图片。
那么我们将图片写在h1中搜索引擎不认识，将图片直接写在h1中是一种错误的方式，因为搜索引擎不会解析图片中的文字，只识别h1标签中的文字
通常我们在h1中书写文字，然后用背景来显示这些图片，让里面的文字溢出容器：
第一种是通过text-indent让文字溢出
第二中是通过line-height让文字从盒子中出去，通过overflow:hidden溢出隐藏

   <!-- SEO -->
    <h1>淘宝网</h1>

 /* SEO */
 h1 {
     background-image: url(./image/4.png);
     background-repeat: no-repeat;
     width: 143px;
     height: 59px;
     /* 第一种 */
     /* text-indent: -1000px; */
     /* 第二种 */
     line-height: 1000px;
     overflow: hidden;
 }

精灵图

css sprites：网页上有很多小的碎图片，不管图片大小，一个图片就会发起一次http请求。很多碎图片就会发起很多http请求。降低网页的加载速度。我们将这些碎图片整合到一张图片上，只会发起一次http请求。提高网页的加载速度。这就是精灵图技术。
应用：
1 通过盒子的宽高限制精灵图
2 通过background-position得到具体的精灵图小图片
精灵图的制作：
1 所有的小碎图片必须是png
2 精灵图大小不要太大，能保证所有的小碎图片可以盛放
3 小精灵图摆放：从上到下摆放（最好颜色相近的放在一起）

background: url("~@/assets/img/coverall.png");
background-position: -11px -850px; // 通过position移动位置

~是默认代表当前项目的更目录，需要在alias里面配置个别名
resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            'vue': 'vue/dist/vue.esm.js',
            'components': resolve('src/components'),
            'common': resolve('src/common'),
            'config': resolve('src/config'),
            'views': resolve('src/views')
        }
    }


<style scoped lang="scss">
    @import "~common/sass/variables";
    @import "~common/sass/mixin";
    /* ... */