CSS必知|重点属性background|实践技巧|温故知新

学海无涯，不要沉浸在知识的海洋里，迷失本身。css

要知道本身想要什么，抓住重点，不忘初心。html

这个世界上百分之20的人，掌握着百分之80的财富。面试

接下来一系列教程，就带领你们抓住重点，一块儿作那百分之20的人。markdown

往期知识点回顾：布局

重点属性background

CSS 背景这里指经过background对对象设置背景属性，如经过CSS设置背景各类样式。

background-color

设置颜色做为对象背景颜色

background-image

设置图片做为背景图片

background-repeat

设置背景平铺重复方向

background-attachment

设置或检索背景图像是随对象内容滚动仍是固定的。

background-position

设置或检索对象的背景图像位置。

Background

背景样式的值是复合属性值组合，也就是背景单词的值能够跟多个属性值，值与值之间使用一个空格间隔连接上便可。

background背景做用：

一、设置纯色背景。背景background能够设置对象纯色的背景颜色，

二、设置图为背景。能够设置对象背景为图片，若是背景是图片可让图片重复平铺横铺，或将图片做为对象背景固定在对象任何位置。

Background分析解析

A.设置背景具体颜色值

B.这是背景的具体图片路径

C.设置图片是否平铺

no-repeat:不重复

repeat-x:水平方向（横向）重复平铺

repeat-y:垂直方向（竖向）重复平铺

若是不设置，为全背景平铺

D.具体左右上下的距离

left 图片靠左

right 图片靠右

top 图片靠上

bottom 图片靠下

E.背景图片固定，仍是随上下滚动条滚动

fixed 图片固定

scroll 背景图片内容滚动

代码实践

<!DOCTYPE html>
<html lang="en">
<head>    
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
   <meta http-equiv="X-UA-Compatible" content="ie=edge">  
   <title>flex布局css</title>   
   <style>       
       .container{     
            background: #FFF url(https://image.baidu.com/beijing.gif) no-repeat 0 0 fixed    
       }    
   </style>
</head>
<body>  
   <div class="container">     
   背景图    
   </div>
</body>
</html>
复制代码

面试题：

CSS没法显示背景颜色问题分析解决

一、由使用float浮动形成浮动产生没法显示css背景颜色

二、高度不够而产生背景没法显示

3.若是是float形成：解决方法有三种，一个是设置clear清除浮动、设置css高度、设置css overflow样式。

4.若是是高度缘由：解决方案以下，设置够高的高度，或取消删除高度样式便可。