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


相关推荐

  • Bootstrapper Manifest Generator

    Bootstrapper Manifest GeneratorThistoolisasetoftoolsforworkingwiththePre-requisitebootstrapperinVisualStudiothatisusedbySetupProjectsandClickOnce.Thereareprojectstoenableyoutocreateyourown”packages…

    2022年7月20日
    14
  • kill命令杀死所有进程_linux 杀死进程

    kill命令杀死所有进程_linux 杀死进程1kill:根据进程号(PID)杀死进程在linux上,一般常用的杀死进程的命令是kill,但是也有缺陷,下面说1、查看指定名称的进程,如下我查看运行python程序的进程pythonaux|greppython2、根据进程号(PID)杀死进程:第二列显示的就是进程号killPID3、强制杀死进程,有些进程可能杀不死,就加个-9参数,强制让它死掉!kill-9PID5、杀死多个进程,在后面跟多个进程的PID号即可kill-9PID1PID2PID3…

    2025年7月10日
    3
  • 数据建模方法及步骤图_comsol建模步骤教程

    数据建模方法及步骤图_comsol建模步骤教程何为建模?数据几乎总是用于两种目的:操作型记录的保存和分析型决策的制定。简单来说,操作型系统保存数据,分型型系统使用数据。前者一般仅反映数据的最新状态,按单条记录事务性来处理;其优化的核心是更快地处理事务。后者往往是反映数据一段时间的状态变化,按大批量方式处理数据;其核心是高性能、多维度处理数据。通常我们将操作型系统简称为OLTP(On-LineTransactionProcessing)…

    2025年12月6日
    8
  • Hive 时间日期处理总结

    Hive 时间日期处理总结

    2021年11月26日
    46
  • hdu4035之经典慨率DP

    hdu4035之经典慨率DP

    2022年2月5日
    65
  • Watcher分集介绍(Weight Watcher)

    TextWatcher是packageandroid.text包下的一个接口。这个接口继承了另外一个接口NoCopySpan。TextWatcher接口里主要是定义了三个抽象方法:下面是它的基本用法:TextWatcherfieldValidatorTextWatcher=newTextWatcher(){      @Override   

    2022年4月18日
    243

发表回复

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

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