body{/*加载背景图*/background-image:url(images/bg.jpg);/*背景图垂直、水平均居中*/background-position:center center;/*背景图不平铺*/background-repeat:no-repeat;/*当内容高度大于图片高度时,背景图像的位置相对于viewport固定*/background-attachment:fixed;/*让背景图基于容器大小伸缩*/background-size:...
background-image: url(image.jpg); 但是如果图片在一个名为 images 的子目录中,就应该是: background-image: url(images/image.jpg); 背景平铺(background-repeat) 设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。这也许是你需要的,但是有时会希望图片只出现一次,或者只在一个方向平铺。以下为...
API Explorer SDK中心 软件开发生产线 AI开发生产线 数据治理生产线 数字内容生产线 开发者Programs Huawe...
background-image: url(images/bg.jpg); /* 背景图垂直、水平均居中 */ background-position: center center; /* 背景图不平铺 */ background-repeat: no-repeat; /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */ background-attachment: fixed; /* 让背景图基于容器大小伸缩 */ backgrou...
【CSS】background-image背景图片全屏铺满自适应 .box{/* 加载背景图 */background-image: url(images/bg.jpg);/* 背景图垂直、水平均居中 */background-position: center center;/* 背景图不平铺 */background-repeat: no-repeat;/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */background...
.element { background-image: url('image.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; } 复制代码 上述代码会将名为image.jpg的图片作为元素的背景图片,且不进行重复,居中显示,并且保持铺满元素。 0 赞 0 踩最新...
no-repeat:顾名思义,背景图片会根据自身尺寸单张出现在父级元素,不会铺满. repeat-x:背景图片根据自身尺寸沿x轴铺满. repeat-y:背景图片根据自身尺寸沿y轴铺满. inherit:指定background-repeat属性设置应该从父元素继承. 四、background-position(背景位置): ...
在这次的css代码里,新增了一条:background-position: center top;,在这条样式里一共有两个值,第一个值代表的是水平方向背景图片的位置,第二个值大家应该就能想到了,就是垂直方向背景图片的位置,组合起来也就是水平方向居中,垂直方向在顶部,那么正如图片所示,背景图片就移动到了我们想要的位置。在这条样式里,主要...
你好,如果只考虑高级浏览器,这个需求很好做,一句简单的css代码就可以搞定了:html,body {width: 100%;height: 100%;}body {background-image: url(images/bg.png);background-size: cover;}其中background-size的取值:cover:保证背景不变形填满窗口,超出部分被裁剪 contain:保证整张背景图片在...
微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片;base64图片设置步骤如下: ...