在一个页面中 ,首先映入眼帘的除了内容就是内容的背景颜色,那么今天我们就来谈谈background。
首先background 有哪些属性呢?
background-color:背景颜色
background-image:背景图片
background-repeat: 设置背景图片是否重复
background-size:设置背景图片的尺寸
background-position:设置背景图片的位置
background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动
背景颜色可以是英语颜色单词,16进制 rgb() hsl() transparent;
背景图片用url来链接地址,图片地址可以是相对路径也可以是绝对路径;
background-repeat后面跟repeat-x | repeat-y | no-repeat;
background-size后面跟width height | cover |contain;
注:background-size:cover表示按比例铺满容器;
background-size: contain表示按比例放大图片,直到达到border为止;
background-position后面跟x,y | center | left | right;
background-attachment:scroll表示背景图像会随着页面其余部分的滚动而移动
background-attachment:fixed表示当页面的其余部分滚动时,背景图像不会移动
background-attachment: inherit表示继承父级background-attachment设置
那么有人会问,衣蛾盒子里可以同时有被禁颜色和背景图片吗?答案是肯定的!比如下图:
这张图小姐姐可不是用img标签写的噢,就是设置了背景颜色和两张背景图片,代码如下:
background的这几个属性可以合并写;并且顺序不影响结果
以后想起来更多再进行补充。
网友评论