HTML如何加背景图片_css设置背景图片

HTML如何加背景图片_css设置背景图片在HTML中,我们可以使用两种不同的方法在HTML网页上显示背景图片:使用背景属性(HTML标签)使用CSS内部样式表提示:HTML5不再支持标签的background属性,建议使用CSS在Html文档中添加背景图片。使用背景属性使用Background属性在Html文档中添加背景图片。按照以下步骤,我们可以轻松实现。步骤1:我们在文本编辑器中键入HTML代码,或者用文本编辑器打开现有的HTML文件。<!DOCTYPEhtml><html><hea

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

在HTML中,我们可以使用两种不同的方法在HTML网页上显示背景图片:

使用背景属性(HTML标签)

使用CSS内部样式表

提示:HTML 5不再支持标签的background属性,建议使用CSS在Html文档中添加背景图片。

使用背景属性

使用Background属性在Html文档中添加背景图片。按照以下步骤,我们可以轻松实现。

步骤1:我们在文本编辑器中键入HTML代码,或者用文本编辑器打开现有的HTML文件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>奔月教程(runoon.com)</title>
    </head>
    
    <body>
        <h1>使用Background属性添加背景图片</h1>
    </body>

</html>

步骤2:将光标移动到HTML文档中的开始标签内,输入背景属性,如下所示:

<body background=" ">   

步骤3:输入要添加的图片的路径,如果图片存储在与HTML文件同一目录中,请输入以下路径:

<body background="image.jpg">

如果我们的图像存储在任何其他目录中,则输入该图像的正确路径。如下所示:

<body background="/home/images/image.jpg"> 

如果我们的图片在互联网上,那么我们也可以使用URL添加图片,如下所示:

<body background="https://www.runoon.com/img/background7.jpg">   

如果图像小于页面,图像会进行重复。

步骤4:最后,在文本编辑器中保存HTML文件或HTML代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>奔月教程(runoon.com)</title>
    </head>
    
    <body background="/img/background7.jpg"> 
        <h1>使用Background属性添加背景图片</h1>
    </body>

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/188529.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 计划任务 SchedulerFactoryBean 配置

    计划任务 SchedulerFactoryBean 配置Quartz是开源任务调度框架中的翘首,它提供了强大任务调度机制,同时保持了使用的简单性。Quartz允许开发人员灵活地定义触发器的调度时间表,并可以对触发器和任务进行关联映射。此外,Quartz提供了调度运行环境的持久化机制,可以保存并恢复调度现场,即使系统因故障关闭,任务调度现场数据并不会丢失。此外,Quartz还提供了组件式的侦听器、各种插件、线程池等功能。Spring为创建Quart…

    2022年5月10日
    127
  • 工具说明书格式_lastingfor什么药

    工具说明书格式_lastingfor什么药下载安装:Downloads-DBBrowserforSQLitehttps://sqlitebrowser.org/dl/下载64位安装版:DB.Browser.for.SQLite-3.12.2-win64.msiZip文件是免安装解压缩版,PortableApp是一个exe文件打包版。安装完,打开后是这个样子:点击上面红框处,新建一个database,选择路径,输入文件名,保存即可。在SQLite里,一个database就是一个后缀db的文…

    2025年10月9日
    4
  • ID卡(工卡)复制到手机NFC「建议收藏」

    ID卡(工卡)复制到手机NFC「建议收藏」1.很多单位的工卡都是ID卡,而读卡机,一般是多频的,支持多种卡,那么如何把ID卡写到手机NFC中,实现“忘带卡自由”呢?2.前提条件:用手机NFC,在单位的刷卡机上刷卡,提示“非法卡”。说明打卡机支持NFC,如果不支持,请略过本文3.在单位的打卡机上正常刷卡,屏幕上会提示卡号。或者有的工卡上带卡号,一般ID卡号是00开头或000开头的10位卡号。如果不是,说明不是ID卡,请略过本文。有的单位的人事系统里也会记录员工的物理ID卡号。或者用其他读卡器读ID卡,也能读到卡号。4.获取到ID物理卡号后

    2022年5月1日
    1.6K
  • Mac 开启apache PHP

    Mac 开启apache PHP命令行:开启apache服务:sudoapachectlstart停止apache服务:sudoapachectlstop重启服务:sudoapachectlrestart查看版本:httpd-v开启之后打开浏览器输入:localhost,看到Itworks!说明服务正常开启!命令行打开系统隐藏目录:open/etc/apache21.httpd

    2022年7月12日
    26
  • latex插入图片

    latex插入图片1.单图居中\begin{figure}[htbp]\centering\includegraphics[width=8cm]{images/fig1}\caption{图的说明}\end{figure}2.双图横向并列\begin{figure}[htbp]\begin{minipage}[t]{0.5\linewidth}\centering\includegr…

    2022年6月10日
    35
  • list数组遍历时能不能使用remove()方法,要注意什么

    list数组遍历时能不能使用remove()方法,要注意什么list数组遍历时能不能使用remove()方法,要注意什么

    2022年4月23日
    69

发表回复

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

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