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


相关推荐

  • 在mysql中如何修改字段类型_MySQL怎么修改字段类型?「建议收藏」

    在mysql中如何修改字段类型_MySQL怎么修改字段类型?「建议收藏」在MySQL中,可以通过altertable语句来修改表中一个字段的数据类型。下面本篇文章就来带大家了解一下altertable语句,介绍如何修改字段类型,希望对大家有所帮助。在MySQL中,altertable语句是用于在已有的表中添加、修改或删除列(字段)的。1、添加字段(列)altertable表名add字段名数据类型示例:在表”Persons”中添加一个名为”Birt…

    2022年6月1日
  • 【推荐】Java内存管理系列文章

    勿在流沙筑高台,出来混迟早要还的。做一个积极的人编码、改bug、提升自己我有一个乐园,面向编程,春暖花开!谢谢你的阅读,如果您觉得这篇博文对你有帮助,请点赞或者喜欢,让更多的人看到!祝你每天开心愉快!不管做什么,只要坚持下去就会看到不一样!在路上,不卑不亢!博客首页 : http://blog.csdn.net/u010648555愿你我在人生的路上能都变成最好的自己,能…

    2022年2月28日
  • JCF_jcf应用培训

    JCF_jcf应用培训JCF容器框架:对外接口:容器中所能存放的抽象的数据类型;接口实现:可复用的数据结构;算法:对数据的查找和排序;容器的框架优点:提高存储效率;避免程序员重复查找;JCF主要数据结构:列表、集合、映射。List:列表有序的Collection允许重复允虚嵌套List三大类:ArrayList:(不支持同步)利用索引快速定位。不适合指定位置的插入、删除操作。适合变动不大,主要用于查询的数据。容量可以动态调整容量填满时自动扩充容量的50%。Linke

    2022年10月22日
  • tcptraceroute与traceroute

    tcptraceroute与traceroute1traceroute功能说明:显示数据包到主机间的路径。它默认发送的数据包大小是40字节。通过traceroute我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径。当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不一样,但基本上来说大部分时候所走的路由是相同的。工作原理Traceroute程序的…

    2022年6月20日
  • 并发编程篇:java 高并发面试题

    并发编程篇:java 高并发面试题1、线程与进程进程是一个实体。每一个进程都有它自己的地址空间,一般情况下,包括文本区域(textregion)、数据区域(dataregion)和堆栈(stackregion)。文本区域存储处理器执行的代码;数据区域存储变量和进程执行期间使用的动态分配的内存;堆栈区域存储着活动过程调用的指令和本地变量。一个标准的线程由线程ID,当前指令指针(PC),寄存器集合和堆栈组成。另外,线程是…

    2022年5月6日
  • npm更新命令行[通俗易懂]

    查看自己npm,跟node版本:npm-vnode-v使用命令行升级npm:npminstallnpm@latest-g

    2022年4月18日

发表回复

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

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