工厂网站怎么做,做流量网站,成功的企业网站案例,wordpress页面设置介绍 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
1 背景颜色 属性名#xff1a;background-color 作用#xff1a;指定HTML元素的背景色。 取值#xff1a;英文颜色、16进制、rgb、rgba、transparent#xff08;一般为透明#…介绍 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
1 背景颜色 属性名background-color 作用指定HTML元素的背景色。 取值英文颜色、16进制、rgb、rgba、transparent一般为透明 示例 div {background-color: lightblue;
}div {background-color: #0ff;
}div {background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}2 背景图片 属性名background-image 作用指定用作元素背景的图像. 示例 /* 设置页面背景图 */
body {background-image: url(paper.gif);
}3 背景图位置 属性background-position 作用改变图片在背景中的位置 语法background-position: x y; 取值百分比浮点数和单位标识符组成的长度值、位置top/center/bottom/left/right等 说明 参数是方位名词 如果指定的两个值都是方位名词则两个值前后顺序无关比如 left top 和 top left 效果一致如果只指定了一个方位名词另一个值省略则第二个值默认居中对齐 参数是精确单位 如果参数值是精确坐标那么第一个肯定是 x 坐标第二个一定是 y 坐标如果只指定一个数值那该数值一定是 x 坐标另一个默认垂直居中 参数是混合单位 如果指定的两个值是精确单位和方位名词混合使用则第一个值是 x 坐标第二个值是 y 坐标 示例 img{background-position: top left; /* 背景图像位于容器的左上角 */ background-position: center center; /* 背景图像位于容器的中心 */background-position: 20px 40px; /* 背景图像距离容器左边20px顶部40px */background-position: -10px -5px; /* 背景图像向左偏移10px向上偏移5px如果容器足够大图像可能部分不可见 */ background-position: 50% 50%; /* 背景图像的中心与容器的中心对齐 */
}4 背景重复 属性名background-repeat 作用默认情况下 background-image 属性在水平和垂直方向上都重复图像. 取值 repeat默认在横向或纵向上平铺。repeat-x仅在水平方向重复。repeat-y仅在垂直方向重复。no-repeat指定背景图像不平铺。 示例 body {background-image: url(gradient_bg.png);background-repeat: repeat-x; /* 仅在水平方向重复 */
}5 背景附着 属性名background-attachment 作用指定背景图像是应该滚动还是固定的不会随页面的其余部分一起滚动 取值 fixed背景图像固定。scroll背景图像应随页面的其余部分一起滚动。 示例 body {background-image: url(tree.png);background-repeat: no-repeat;background-position: right top;background-attachment: fixed;background-size: 80px 60px;
}6 背景简写 属性background 写法background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; 语法 background(background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
)示例 body {/* 设置背景颜色 *//* background-color: rgba(0, 255, 0, 0.2); *//* 设置背景图片 *//* background-image: url(bbg.jpeg); */background-image: url(th.gif);/* 设置背景图尺寸 */background-size: 100%;/* 设置背景图不平铺 */background-repeat: no-repeat;/* 设置背景图显示位置 */background-position: right top;/* background-position: 100px; *//* 设置背景图附着方式 */background-attachment: scroll;/* 简写方式 */background: url(bbg.jpeg) no-repeat scroll 0 0;}7 示例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title背景设置/titlestylebody {/* 背景颜色 *//* background-color: greenyellow; *//* 调整背景颜色透明度(alpha)取值 0-1 *//* background-color: rgba(0, 200, 200, 0.2); *//* 渐变色 *//* background: linear-gradient(to bottom, #629ccc, #035bcc, #72abcb); *//* 背景图片 *//* 静态图 *//* background-image: url(image/sbg.jpg); *//* background-image: url(image/bbg.jpeg);background-size: 100%; *//* 动态图gif格式 *//* background-image: url(image/th.gif);background-size: 100%; *//* 图片平铺 *//* x、y方向都会平铺【默认】,推荐使用no-repeat *//* background-repeat: repeat; *//* background-repeat: no-repeat; *//* background-repeat: repeat-x; *//* 图片位置 *//* background-position: 100px 300px; *//* background-position: 200px; *//* background-position: left top; *//* background-position: right; *//* background-position: 100px left; *//* 图片附着背景图是否随着内容进行滚动 *//* background-attachment: fixed; *//* background-attachment: scroll; *//* 综合写法 */background: url(image/th.gif) no-repeat scroll;}div {/* 快捷写法w400h1200gbc */width: 400px;height: 1200px;background-color: #f16e6e;}/style/headbodydiv/div/body
/html8 总结
