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

html中设置背景图片为平铺,html背景图片怎么设置平铺方式在html中,可利用background-repeat属性来设置背景图片的平铺方式;当属性值设置为“repeat”时可向垂直和水平方向平铺,“repeat-x”时可水平平铺,“repeat-y”时可垂直平铺,“no-repeat”时不平铺。本教程操作环境:windows7系统、CSS3&&HTML5版、DellG3电脑。html背景图片设置平铺方式div{border:1px…

大家好,又见面了,我是你们的朋友全栈君。

在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视频教程)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/137608.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 0.5solr7.3.1在CentOS7上的安装

    0.5solr7.3.1在CentOS7上的安装

    2021年8月23日
    133
  • 长江商学院营销学李洋教授分析大数据与精准营销

    长江商学院营销学李洋教授分析大数据与精准营销  精准营销是大数据应用领域的重要课题之一,大数据时代的精准营销可以让企业以最小的营销成本获得最大的收益。那么我们如何利用企业大数据做精准营销呢? …

    2022年7月21日
    33
  • webstrom2021激活码【在线注册码/序列号/破解码】

    webstrom2021激活码【在线注册码/序列号/破解码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月20日
    51
  • 【云原生 | 05】Docker中容器的创建与启停「建议收藏」

    【云原生 | 05】Docker中容器的创建与启停「建议收藏」首先Docker会检查本地是否存在基础镜像,如果本地还没有该镜像的话,那么Docker就会连接官方维护的DockerHubRegistry,查看DockerHub中是否有该镜像。Docker一旦找到该镜像,就会下载该镜像并将其保存到本地宿主机中。随后,Docker在文件系统内部用这个镜像创建了一个新容器。该容器拥有自己的网络、IP地址,以及一个用来和宿主机进行通信的桥接网络接口。………………

    2025年6月13日
    2
  • 机器学习——决策树模型:Python实现

    机器学习——决策树模型:Python实现机器学习——决策树模型:Python实现欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你

    2022年10月19日
    3
  • 什么是用户态和内核态_进程的用户态和内核态

    什么是用户态和内核态_进程的用户态和内核态要了解什么是用户态,什么是内核态,我们需要先了解什么是进程的用户空间和内核空间:Linux虚拟内存的大小为2^32(在32位的x86机器上),内核将这4G字节的空间分为两部分。最高的1G字节(从虚地址0xC0000000到0xFFFFFFFF)供内核使用,称为“内核空间”。而较低的3G字节(从虚地址0x00000000到0xBFFFFFFF),供各个进程使用,称为“用户空间”。也就是说,在这4G的…

    2022年9月15日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号