背景样式详解
- opacity和display的区别
opacity设置的是透明度，值的范围是0~1，0代表完全透明，1代表不透明
display为none，浏览器就不会渲染这个元素。
一个元素设置为display为none后想让他在显示出来使用，display:原来的显示类型；
- 背景颜色的显示区域
内容区+padding+border
- 背景图片
background-image: url(‘图片地址’) ;
div{ background-image: url('./images/pic.jpg'); }
背景图片的显示区域 内容区域+padding+border
背景图片支持的格式：.jpg，.png，.gif，.webp
- 浏览器的渲染层级
第一层：内容层
第二层：边框层
第三层：背景图片
第四层：背景颜色
- 背景图片为什么会重复显示：
浏览器发现图片比盒子小就会让图片平铺把盒子占满
- 如何让背景图片不重复显示：
使用background-repeat属性，它有三个值
div{ background-repeat: no-repeat /*垂直方向和水平方向都会重复*/ repeat-x /*水平方向平铺*/ repeat-y /*垂直方向平铺*/ repeat /*垂直方向和水平方向都会重复*/ ; }
background-repeat:
repeat -> 垂直方向和水平方向都会重复
repeat-x -> 水平方向平铺
repeat-y -> 垂直方向平铺
no-repeat -> 水平垂直方向都不平铺
；
- 设置完背景图片不平铺之后发现图片不会出现在border内，为什么？
背景图片在设置平铺的时候会先在内容区显示一张图片，然后再去平铺。
- 如何把背景图片拉大？
使用background-size的属性，它有两个值：
background-size：width背景图片的宽 height背景图片的高；
宽高可以设置为像素值，也可以设置为百分比：
div{ width:500px; height:500px; background-size: 350px 350px;/*支持*/ background-size:50% 50%;/*同样支持,但百分数的基数是width和height属性，也就是说现在图片的宽度是1*500=500px 高度是1*500=500px*/ background-size:350px;/*只写一个值的时候宽缩放至350px，高等比例缩放*/ }/*除此之外background还有两个比较特殊的值，cover，contain*/ div{ width:500px; height:500px; background-size: cover/*图片一直缩放到铺满整个内容区域*/ contain/*一条边缩放到铺满内容区域后另一条边停下来*/ ; }
- 默认情况下背景图片是贴着padding的左上角去排列的，怎么改变它的起始点？
使用background-origin属性
div{
background-origin:
padding-box/*背景图片相对于内边距来定位*/
border-box/*背景图片相对于内边距来定位*/
content-box/*背景图片相对于内容区域来定位*/
;
}- 背景剪裁
使用background-clip属性,会裁剪背景图片和背景颜色
div{
background-clip:
content-box/*只显示内容区部分的图片和颜色*/
border-box/*显示border+padding+内容区的背景图片和背景颜色*/
padding-box/*显示padding+内容区的背景图片和背景颜色*/
;
}- overflow属性：
div{
overflow:
visible/*超出之后正常显示*/
hidden/*超出隐藏*/
scroll/*内容不管超不超出都显示出一个滚动条*/
auto/*内容不超出的时候不显示滚动条，内容超出则显示滚动条*/
;
}- 什如何让背景图片不跟随内容区域滚动
使用backgroun-attachment属性
div{
background-attachment:
scroll/*默认，不随内容区域滚动，而是定在起始的位置*/
local/*会随内容的滚动而滚动*/
fixed/*非常诡异的一种情况*/
;
}- 背景图片复合样式写法:
div{
background: color image repeat attachment position/size;/*位置和大小之间要使用/分隔开*/
}