CSS——读书笔记-04-背景图

第四章 背景图像效果

1.基础

默认情况下，浏览器水平和垂直地重复显示背景图像，让图像平铺在整个页面上。

body {
    background-image:url(/img/pattern.fig);
}

可以选择水平、垂直、不平铺：repeat-x、repeat-y、no-repeat

body {
    background-image: url(/img/pattern.gif);
    background-repeat: repeat-x;
}

可以设置背图位置

如： 元素左边，垂直居中。（也可以使用像素和百分数实现）

h1 {
    padding-left: 30px;
    background-image: url(/imd/bullet.gif);
    background-repeat: no-repeat;
    background-position: left center;
}

简写：

h1 {
    background: #ccc url(/img/ddd.gif) no-repeat left center;
}

　　

2.圆角框

1》固定宽度的圆角框——可以通过背景图像实现圆角

上边top一个图、下边bottom一个图，中间用背景色连接

灵活的，可宽度扩展的，可以设置4个角各一张图，然后宽度设置em单位，可根据字号拉伸。

2》多背景、border-radius、border-image

 

3.投影

1》图片负外边距偏移

2》图像加上边框和内边距

3》box-shadow: 

需要4个值：垂直和水平偏移、投影的宽度和颜色

 

4.不透明度：

opacity: 0.8

background-color: rgba(0,0,0,0.8)