背景设置属性background设置出丰富多彩的网页效果
来源:原创
时间:2015-08-14
作者:脚本小站
分类:CSS/HTML
背景设置属性background是很有用的一个属性,可以做出丰富多彩的网页效果,前提是要灵活的运用它。
简洁书写背景属性 background:颜色 图片 重复 图片移动 定位; 背景颜色: background-color:#FF0000; 同 background:#FF0000; 同 background:rgba(120,120,120,0.5); 背景图片: background-image:url(images/index_03.jpg); 背景重复: background-repeat: |no-repeat 不重复 |repeat 重复 |repeat-x x轴重复 |repeat-y y轴重复 添加多张背景: background:url("") no-repeat,url('') no-repeat 400px 0px, url('') no-repeat 600px; 背景图片大小: background-size:100px 100px; 固定和固定 background-size:100% 100%; 百分比和百分比 background-size:auto auto; 自动和自动 background-size:auto 100px; 自动和固定 background-size:auto 150%; 自动和百分比 调整图片位置 background:url("") no-repeat -140px -60px; background:url("") center top no-repeat; 背景相对内容固定: background-attachment: |fixed 固定在页面上静止不动 |scroll 随背景滚动 背景位置:background-position:50% 50%; 50% 50%居中 background-position-x: background-position-y: |50% 50% |-20px 20px; |center: 背景图像横向和纵向居中。 |left: 背景图像在横向上填充从左边开始。 |right: 背景图像在横向上填充从右边开始。 |top: 背景图像在纵向上填充从顶部开始。 |bottom: 背景图像在纵向上填充从底部开始。 layer-background-color:transparent; layer-background-image: |none; |url(); 背景相对框开始显示的位置: background-origin: border-box padding-box content-box 裁剪背景 background-clip border-box padding-box content-box no-clip