网站建设设计解决方案,自建网站平台 优帮云,做网站为什么要钱,淘宝客做连接网站吗css背景属性 background
1. background-color背景颜色
背景颜色可以用“十六进制”、“rgb()”、“rgba()”或“英文单词”表示
2. background-image:url(路径);背景图片
也可以写成 background:url();
3. background-repeat背景重复
属性值#xff1a; - repeat:x,y平铺…css背景属性 background
1. background-color背景颜色
背景颜色可以用“十六进制”、“rgb()”、“rgba()”或“英文单词”表示
2. background-image:url(路径);背景图片
也可以写成 background:url();
3. background-repeat背景重复
属性值 - repeat:x,y平铺默认- repeat- x水平方向平铺- repeat-y垂直方向平铺- no-repeat不平铺(照片不重复)
4. backgroun-position 背景图片位置
属性值backgroun-position向右移动 向下移动 ;向右移动可以写向左移动left向右移动right居中center也可以是像素具体值要是是负值表示向左移动向下移动可以向上移动top向下移动bottom居中center,也可以是具体值或者用像素表示要是负值就是向上移动他们的组合有 !-- 横向居中竖向居中、顶部、底部 --backgroun-position: center center ;backgroun-position: center top ;backgroun-position: center bottom ;!-- 横向向左竖向顶部、居中、底部 --backgroun-position: left top ;backgroun-position: left center ;backgroun-position: left bottom ;!-- 横向向右竖向顶部、居中、底部 --backgroun-position: right top ;backgroun-position: right center ;backgroun-position: right bottom ;5. backgroun复合属性
backgroun:url() 平铺 照片位置 照片大小 颜色 ; (位置不固定)
6. background-attachment 背景固定页面滚动
决定背景图像的位置是在“视口”内固定或者随着它的区块滚动scroll 默认值。背景图片随着页面的滚动而滚动相对于元素本身固定而不是随着它的内容滚动fixed此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制背景不会随着元素的内容滚动local 背景相对于元素的内容固定。如果一个元素拥有滚动机制背景将会随着元素的内容滚动同时背景图图片随着页面的滚动而滚动
7. background-size 背景尺寸
背景图片的宽高大小
x y background-size: 100px 200px; x y 数值分别表示背景图片宽高大小
x% y% background-size: 50% 20%; 百分比是相对于盒子的宽高而言
x auto background-size: 100px auto; 是相对于第一个值宽来自动缩放
contain background-size: contain; 背景图片智能改变尺寸以容纳到盒子里
cover background-size: cover; 背景图片智能改变尺寸以撑满盒子8. background-clip 设置元素的背景裁剪
background-clip设置元素的背景(背景图片或颜色)是否延伸到“边框”、“内边距盒子”、“内容盒子”下面
值说明border-box默认值。背景绘制在边框方框内。 延伸至边框边缘padding-box背景绘制在内边距方框内。 延伸至内边距边缘content-box背景绘制在内容方框内。 仅限于内容区域text背景被裁剪成文字的前景色。
9. background-origin 背景图片的定位区域
值描述padding-box背景图片的摆放以 padding 区域为参考 默认值 从边框开始绘制border-box背景图片的摆放以 border 区域为参考 从内边距开始绘制content-box背景图片的摆放以 content 区域为参考 从内容区域开始绘制
10. background-blend-mode
设置背景层之间的混合模式。适用于有多重背景图像或背景颜色与背景图像混合的情况。可选值众多如normal、multiply、screen、overlay等。
