html中设置背景图片为平铺,html背景图片怎么设置平铺方式

在html中,可利用background-repeat属性来设置背景图片的平铺方式;当属性值设置为“repeat”时可向垂直和水平方向平铺,“repeat-x”时可水平平铺,“repeat-y”时可垂直平铺,“no-repeat”时不平铺。

6d9ad8c6c8a4715ae4d38118e03c75c2.png

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

html背景图片设置平铺方式

div{

border: 1px solid #000fff;

height: 200px;

background-image: url(img/1.jpg);

margin-bottom:10px ;

}

#content1 {

background-repeat: repeat;

}

#content2 {

background-repeat: repeat-x;

}

#content3 {

background-repeat: repeat-y;

}

#content4 {

background-repeat: no-repeat;

}

效果图:

ab29326775aa5f1a19114b20a65b8bdf.png

说明:

background-repeat 属性设置是否及如何重复背景图像,定义了图像的平铺模式。

默认地,背景图像在水平和垂直方向上重复。

属性值:值描述

repeat默认。背景图像将在垂直方向和水平方向重复。

repeat-x背景图像将在水平方向重复。

repeat-y背景图像将在垂直方向重复。

no-repeat背景图像将仅显示一次。

(学习视频分享:css视频教程)

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值