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


相关推荐

  • 5个最佳拖放式WordPress网页生成器比较(2018)

    5个最佳拖放式WordPress网页生成器比较(2018)你想要一个简单的方法来建立和定制你的WordPress网站?这就是拖放WordPress网页生成器插件派上用场的地方。这些WordPress网页生成器允许您在不编写任何代码的情况下创建、编辑和自定义您的网站布局。在本文中,我们将比较和回顾5个最好的WordPress拖放网页构建器。为什么使用拖放页面生成器的WordPress?当开始一个博客时,许多WordPress初学者发现很难在他们的网站上更改或自定义页面布局。虽然很多优质的WordPress主题都有不同的页面布局,但对于不懂HTML代码的人来说,

    2022年5月11日
    44
  • Arcgis二次开发——发布地图

    Arcgis二次开发——发布地图简单发布地图1、测试arcgispro发布地图默认打开arcgispro的地图模板,点击“共享”=》“web地图”,填上相关信息,点击“共享”。完成之后,即可在arcgisonline里看到新发布的“maptest001”服务。2、在arcgisonline里查看发布的内容3、用arcgisjsapi的沙箱查看刚刚发布的地图注意设置:esriConfig.portalUrl=”arcgisonline的个人主页地址”portalItem的id就是你发布…

    2022年7月23日
    33
  • Nginx+keepalived+tomcat实现tomcat高可用性负载均衡

    Nginx+keepalived+tomcat实现tomcat高可用性负载均衡

    2021年8月16日
    72
  • WIN10下 Tomcat安装及配置教程「建议收藏」

    WIN10下 Tomcat安装及配置教程「建议收藏」目录工具/原料方法/步骤注意事项工具/原料1,JDK:版本为jdk1.8我的下载文件里有,解压缩版的2,tomcat:版本为apache-tomcat-8.0.53-windows-x64.zip下载地址http://tomcat.apache.org/3,windows10,64bit方法/步骤一、安装JDK和Tomcat1,安装JDK:解压即可,…

    2022年5月12日
    45
  • C语言字符串输入及输出的几种方式

    C语言字符串输入及输出的几种方式1.字符串数组+初始化chars1[]=”array”;//字符数组chars2[6]=”array”;//数组长度=字符串长度+1,因为字符串末尾会自动添‘\0‘printf(“%s,%c\n”,s1,s2[2]);//array,r2.字符串指针+初始化char*sp=”pointer”;//字符指针printf(“%s,%c,%c\n”,sp,

    2022年7月24日
    7
  • Virus.Win32.Tc专杀方案[通俗易懂]

    Virus.Win32.Tc专杀方案[通俗易懂]Virus.Win32.Tc.bat恶意病毒专杀处理方案

    2022年7月25日
    9

发表回复

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

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