(1)background-image:可添加多张背景图片。 参数:url() || none(默认) background-image: url(images/scroll_top.jpg), url(images/scroll_bottom.jpg), url(images/scroll_middle.jpg); 注意:背景图不占位置(不受padding的影响), img插入图片才占位且有4像素的距离,即背景图不能撑出高度。4像素的距离用...
background-image:url('res/bgA.jpg') 1. 2.2 设置多个背景图片 说明:渲染时前面的背景图片在上层、后面的背景图片在下层。 background-image:url('res/bgA.jpg'),url('res/bgB.jpg'); background-repeat:no-repeat; 1. 2. 3. background-repeat :设置背景图片的平铺效果 说明:设置背景图片的平铺效果,...
background-image: url(1.jpg); background-repeat:no-repeat; border: 1px solid #000; } 效果图: 3、repeat-x设置背景图像在水平方向平铺 <!DOCTYPE html> .demo{ width: 600px; height: 540px; margin: 50px auto; background-image: url(1.jpg); background-repeat:repeat-x; bor...
background-image:url('1.jfif')表示加载一个图片,并堆叠平铺图片在该标签中,及如果标签长宽大于图片长宽,该图片就会重复出现平铺在该标签长宽内 <!DOCTYPE html> Title 效果:
background-image:url('1.jfif')表示加载一个图片,并堆叠平铺图片在该标签中,及如果标签长宽大于图片长宽,该图片就会重复出现平铺在该标签长宽内 <!DOCTYPE html> Title 效果:
1、repeat 设置背景图像完全平铺 <!DOCTYPEhtml>.demo{width:600px;height:540px;margin:50pxauto;background-image:url(1.jpg);background-repeat:repeat;border:1pxsolid#000; } AI代码助手复制代码 效果图: 2、no-repeat 设置背景图像不平铺 <!DOCTYPEhtml>.demo{width:600px;height:540px;margin...
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 background:black url(image.jpg) no-repeat fixed top; 1.6背景半透明 background:rgba(0,0,0,0.3) 最后一个参数是alpha透明度,取值范围在0~1之间 我们习惯把0.3的0省略,写为background:rgba(0,0,0,3); ...
body{/* 加载背景图 */background-image:url(images/bg.jpg);/* 背景图垂直、水平均居中 */background-position: center center;/* 背景图不平铺 */background-repeat: no-repeat;/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */backgro...
background-image:url(images/tu.jpg); background-repeat: no-repeat; } css背景在X及Y轴方向均不平铺效果如下: css背景图片平铺之横向平铺背景: 背景图片现在只在X轴即横向进行了平铺操作,纵向并没有进行平铺 #content { border:1px solid #000fff; height:500px...
body {/* 加载背景图 */background-image: url(images/bg.jpg);/* 背景图垂直、水平均居中 */background-position: center center;/* 背景图不平铺 */background-repeat: no-repeat;/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */background-attachment: fixed;/* 让背景图基于容器大小伸...