网站设计与程序方向专业,126企业邮箱入口,建设网站对服务器有什么要求,多语言网站建设应注意哪些事项1.background-color 设置背景颜色#xff0c;取颜色值 注意#xff1a; 1.所有元素默认的背景颜色都是透明色#xff0c;新建窗口的白色不是body的背景色#xff0c;是浏览器渲染的 2. 背景颜色从边框位置开始绘制 3. 如果元素添加内边距取颜色值 注意 1.所有元素默认的背景颜色都是透明色新建窗口的白色不是body的背景色是浏览器渲染的 2. 背景颜色从边框位置开始绘制 3. 如果元素添加内边距也会按照背景颜色进行填充 2.背景图片 1.设置背景图片 属性background-image 取值url 注意1.背景图片的尺寸如果大于元素尺寸图片仍然按照原始尺寸显示超出元素的部分不可见 2.背景图片的尺寸小于元素尺寸浏览器会自动对背景图片重复平铺直到铺满元素 3.背景图片与背景颜色一样不影响元素正常显示 2.设置背景图片的重复方式 图片尺寸不够时浏览器会自动沿水平和垂直两个方向对图片进行重复平铺直到铺满元素 属性background-repeat 取值1.repeat默认值沿水平和垂直方向平铺 2.repeat-x沿水平方向平铺 3.repeat-y沿垂直方向平铺 4.no-repeat设置背景图片不重复平铺 3.设置背景图片的位置 1.属性background-position 2.取值x y 1.取像素值 x表示背景图片水平方向的偏移距离 正值表示图片向右偏移负值表示图片向左偏移 y背景图片垂直方向的偏移距离 正值表示图片向下偏移负值表示图片向上偏移 注意结合“精灵图”实现元素背景图片调整这种技术叫“精灵技术” 2.取百分比 参照元素尺寸计算水平和垂直偏移距离 1. 0% 0%背景图片显示在元素左上角 2. 50% 50%背景图片显示在元素中间 3. 100% 100%背景图片显示在元素右下角 3.方位值确定背景图片的位置 xleft / center / right y: top / center / bottom 如果只设置一个方向上的关键字另外一个方向默认是center 4.设置背景图片的大小 1.属性background-size 2.取值x y x y分别表示背景图片的宽和高 1.像素值 2.百分比参照元素宽高尺寸计算背景图片大小 3.cover表示将图片等比放大至完全覆盖元素超出部分不可见 4.contain表示将图片等比拉伸至刚好被元素容纳不能超出元素尺寸可能或造成背景图片无法完全覆盖元素的效果 5.背景属性简写 1.属性background 2.取值color url() repeat position 注意1.背景属性按照上面取值的顺序设置 2.background-size单独设置转载于:https://www.cnblogs.com/zengsf/p/9794104.html
