原文地址：zclzone.com/zhangsheng
更佳閱讀體驗(yàn)：zclzone.gitee.io/zhangsheng
| 屬性 | 示例 | 備注 |
|---|---|---|
| 背景顏色 | background-color: red; | |
| 背景圖片 | background-image: url(iamges/***.jpg); | |
| 背景平鋪 | background-repeat: repeat-x;background-repeat: repeat-x; | -x:橫向平鋪；-y:縱向平鋪榛斯；no-repeat為取消平鋪 |
| 背景圖片位置(一) | background-position: left top; background-position: right bottom; background-position: center; |
分別為左上、右下感局、居中启盛，若只寫一個(gè)屬性則另一個(gè)默認(rèn)為center |
| 背景圖片位置(二) | background-position: 10px 30px; | 第一個(gè)值為水平坐標(biāo)侦高，第二個(gè)值為縱向坐標(biāo) |
| 背景圖片位置(三)：混搭 | background-position: 10px center; | 橫向10px芝加，縱向居中 |
| 背景附著 | background-attachment: scroll / fixed; | 默認(rèn)是scroll |
| 背景縮放（一） | background-size: 50%; background-size: 100px 200px; |
縮放為原來一半大斜钙琛涩惑；寬100px仁期，高200px，盡量只改一個(gè)值竭恬，防止圖片失真 |
| 背景縮放（二） | background-size: cover / contain; | cover：會(huì)自動(dòng)調(diào)整縮放比列跛蛋，保證圖片始終填充滿背景區(qū)域，移出部分會(huì)被隱藏;contain:自動(dòng)調(diào)整縮放比例痊硕，保證圖片完整顯示赊级，但背景可能會(huì)有部分裸露 |
簡寫方式:background: 顏色 圖片 平鋪 附著 位置
<style>
body{
background: #000 url(img/xxx.jpg) no-repeat fixed center -25px;
}
</style>
凹凸文字效果
<body>
<div>我是凸起的文字</div>
<div>我是凹下的文字</div>
</body>
<style>
body {
background-color: #ccc;
}
div {
color: #ccc;
font: 700 80px "微軟雅黑";
}
div:first-child {
text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
}
div:last-child {
text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
}
</style>
