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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • $(function(){})与window.onload的区别

    $(function(){})与window.onload的区别

  • 爱比较病毒测试(不是震网病毒特点的是)

    CIH、爱虫、冲击波、熊猫烧香,对这4种网络病毒你了解多少?现在的网络病毒能够分为三类,第一类是“蠕虫”病毒,这类型的病毒是在感染电脑后经过不停地复制自己,将电脑原来的运行和储存资源耗费掉,最终电脑由于资源耗费干净而无法运行直至死机;第二类是“进犯型”病毒,这类病毒和蠕虫病毒不一样,进犯型病毒一旦感染就会对电脑软件甚至是硬件做出破坏性的进犯,威力和破坏性极端强大。最终第三类是“木马”类病毒,这类病…

  • Java程序设计(基础)- 基本语法

    Java程序设计(基础)- 基本语法

  • 获取apk签名

    获取apk签名Apk签名相关方法一1.解压apk2.在META_INF目录下找到xxx.RSA文件3.执行keytool-printcert-filexxxx.RSA目录方法二keytool-list-v-keystorexxxx.keystore-storepass签名文件密码debug签名密码默认为android…

  • 创建ORACLE大文件表空间

    创建ORACLE大文件表空间目录创建普通表空间你可以创建多大的表空间?    创建bigfile表空间查看表空间的使用情况 创建普通表空间 表空间不够报错ORA-01144:Filesize(26214400blocks)exceedsmaximumof4194303blocks 你可以创建多大的表空间?     我们在前面提及,BFT还受到操作系统的文件…

  • 最新版java安装教程[通俗易懂]

    最新版java安装教程[通俗易懂]提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、官网下载jdk二、环境配置测试前言2021java的新版安装教程:与之前的安装教程相比还是有一些改动的,省去了一些不必要的繁琐的步骤,简洁而又实用。下面是详细的安装教程,只要按照此教程逐步配置,就可以成功安装java环境。一、官网下载jdk到官网https://www.oracle.com/java/technologies/javase-jdk13-downloads.html下载下载完成解压到

发表回复

您的电子邮箱地址不会被公开。

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