背景属性
背景属性在网页设计的时候也是经常使用的,在刚刚接触到前端的时候,我们可以先学习画色块来对网页进行布局。画色块使用到最多的就是背景颜色。
background可以设置以下属性:
- background-color 背景颜色
- background-image 背景图片
- background-position 背景位置
- background-size 背景大小
- background-repeat 背景平铺
- background-origin 背景源点
- background-clip 背景裁剪
背景颜色
bockground-color: red;
bockground-color: #ff0000;
bockground-color: #f00;
(只有当两两相同时才能写三个,eg: #aabb00 => #ab0)
bockground-color: rgb( 255 , 0 , 0 );
bockground-color: rgba(255 , 0 , 0 , 0.5);
(最后一位为透明度,取值0-1)
背景图片及背景图片的大小、位置
1.使用:background-img:url(图片地址);
2.背景图片与在div中插入img的区别:
方式 | 图片>div | 图片<div | 文字叠加 |
---|---|---|---|
直接插入img | 超出 | 左上角 | 不可以(会在图片下面) |
背景图片 | 超出部分隐藏 | 平铺 | 可以 |
注:背景图依耐于盒子本身 |
3.背景大小:background-size:50px 50px;
3.1 图片平铺(一张图)且会变形:
background-size:100% 100%;
3.1 图片不会变形:
宽度100%,高度自适应:
background-size:100% auto;
background-size:100%;
高度100%,宽度自适应:
background-size: auto 100%;
3.1 图片不变形,但可能会被裁剪:
覆盖整个盒子,图片会等比例缩放
background-size:cover;
3.1 图片既不变形,也不裁剪(以最大原比例放置):
background-size:contain;
4.设置图片平铺效果(图片大小不够,以原图大小重复放置,多图)
background-repeat:no-repeat; repeat-x / repeat-y
不平铺 x方向平铺 y方向平铺
5.背景图片的位置:background-position
background-position:-10px 10px;
(左、上)可以为负
background-position:center center;
(right)
background-position:50% 50%;
如果只填写一个值,则默认第二个值为center(上下居中)
6.背景图片结合写法:
background: url(图片地址) no-repeat center green;
注:position不能拆开写 eg:no-repeat center green center
(会报错)
不分先后位置,但是背景位置必须放在一起
简写不能写图片大小,需要经图片大小额外写
background:no-repeat center darkcyan url(../images/like-active.png);
background-size: 300px 200px;
background-size不能并入background中,必须写在背景图片后面才可以生效
不常用属性:
背景源点(起始位置:左上角)
此属性完全可以被position取代
background-origin: border-box padding-box content-box;
边框开始 内边距开始 内容开始
背景裁剪(右下角)
background-clip: border-box padding-box content-box;
边框 内边距 内容
多背景叠加
背景颜色添加在最后一个背景图片里面
background:url() , url() , url() , red url();
其中如果有背景颜色的话,一定是写在最后一个逗号后面的