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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Android代码混淆技术总结(一)「建议收藏」

    Android代码混淆技术总结(一)「建议收藏」*作者:ix__xi,本文转载自安全客,原文地址:http://bobao.360.cn/learning/detail/3704.html一、前言最近一直在学习Android加固方面的知识,看了不少论文、技术博客以及一些github上的源代码,下面总结一下混淆方面的技术,也算是给想学习加固的同学做一些科普,在文中讲到的论文、资料以及源码,我都会给出相应的链接,供大家进一步

    2022年5月27日
    41
  • 详谈双亲委派机制(面试常问)[通俗易懂]

    前言Java虚拟机对class文件采用的是按需加载的方式,也就是说当需要使用该类时才会将它的class文件加载到内存生成class对象,而且,加载某个类的class文件时,Java虚拟机采用的是双亲委派机制,即把请求交由父类处理,它是一种任务委派模式工作原理(1)如果一个类加载器收到了类加载请求,它并不会自己先加载,而是把这个请求委托给父类的加载器去执行(2)如果父类加载器还存在其父类加载器,则进一步向上委托,依次递归,请求最终将到达顶层的引导类加载器;(3)如果父类加载器可以完成类加载任务,就成

    2022年4月8日
    62
  • rabbitmq常见面试题「建议收藏」

    rabbitmq常见面试题「建议收藏」1、使用RabbitMQ有什么好处?1.解耦,系统A在代码中直接调用系统B和系统C的代码,如果将来D系统接入,系统A还需要修改代码,过于麻烦!2.异步,将消息写入消息队列,非必要的业务逻辑以异步的方式运行,加快响应速度3.削峰,并发量大的时候,所有的请求直接怼到数据库,造成数据库连接异常2、RabbitMQ中的broker是指什么?cluster又是指什么?bro…

    2022年6月22日
    24
  • 关于参数thresh的理解(pd.dropna(thresh=n))

    关于参数thresh的理解(pd.dropna(thresh=n))书上的表达:假设你只想保留包含一定数量的观察值的行,可以使用thresh参数来表示。嗯嗯嗯….有些模棱两可。摸索了一番,终于理解了。格式:df.dropna(thresh=n)简单的理解:这一行除去NA值,剩余数值的数量大于等于n,便显示这一行。1.先创建数组,代码如下:1importnumpyasnp2from…

    2025年6月30日
    0
  • CentOs安装Python3.9

    CentOs安装Python3.9下载python3源码包wgethttps://www.python.org/ftp/python/3.9.0/Python-3.9.0.tgz或者python官网下载https://www.python.org/ftp/python/3.9.0/Python-3.9.0.tgz然后放过去解压缩源码包tar-zxvfPython-3.9.0.tgz进入源码包文件夹cdPython-3.9.0编译且安装进入源码包目录ls查看源码包内容释放编译文件Makefile.

    2022年6月16日
    97
  • Ubuntu使用MAC主题[通俗易懂]

    Ubuntu使用MAC主题[通俗易懂]在Ubuntu上体验Mac系统

    2022年9月2日
    3

发表回复

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

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