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


相关推荐

  • 【Spring Boot 20,孙鑫Java视频教程百度网盘

    【Spring Boot 20,孙鑫Java视频教程百度网盘=============================(一)引入依赖<?xmlversion=”1.0″encoding=”UTF-8″?><projectxmlns=”http://maven.apache.org/POM/4.0.0″xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”xsi:schemaLocation=”http://maven.apache.or

    2022年5月17日
    47
  • 看完这篇Kafka,你也许就会了Kafka[通俗易懂]

    看完这篇Kafka,你也许就会了Kafka[通俗易懂]Kafka学习文章目录Kafka学习1.Kafka简介1.1Kafka消费模式1.2Kafka的基础架构1.3Kafka的安装和使用2.Kafka高级2.1工作流程2.2文件存储2.3生产者分区策略2.4生产者ISR2.4.1副本数据同步策略2.4.2ISR(同步副本集)2.5生产者ack机制2.6数据一致性问题2.7ExactlyOnce3.消费者分区分配策略3.1分区分配策略3.2消费者offset的存储3.3消费者组案例4.高效读写&Zookeeper作

    2022年5月9日
    35
  • luajit性能优化[通俗易懂]

    luajit性能优化[通俗易懂]本文转载地址:(http://www.cnblogs.com/zwywilliam/p/5992737.html)luajit是目前最快的脚本语言之一,不过深入使用就很快会发现,要把这个语言用到像宣称那样高性能,并不是那么容易。实际使用的时候往往会发现,刚开始写的一些小testcase性能非常好,经常毫秒级就算完,可是代码复杂度一上去了,动辄几十上百毫秒的情况就会出现,性能表现非常飘忽。

    2022年10月6日
    0
  • Java 异常之 RuntimeException和Exception的区别

    Java 异常之 RuntimeException和Exception的区别在java的异常类体系中,Error和RuntimeException是非检查型异常,其他的都是检查型异常。所有方法都可以在不声明throws的情况下抛出RuntimeException及其子类不可以在不声明的情况下抛出非RuntimeException简单的说,非RuntimeException必要自己写catch块处理掉。RuntimeExce

    2022年7月24日
    8
  • docker菜鸟教程linux_linux离线安装docker

    docker菜鸟教程linux_linux离线安装dockerlinux安装和使用docker教程文章目录linux安装和使用docker教程1、docker官网安装地址2、卸载linux系统中的docker3、安装docker4、查看安装docker列表5、启动docker6、设置docker开机启动7、查看docker版本8、docker的image远程仓库地址9、拉去镜像10、启动及常用命令1、docker官网安装地址https://docs.docker.com/engine/install/centos/2、卸载linux系统中的docker

    2022年8月31日
    3
  • linux 如何编译安装软件

    linux 如何编译安装软件

    2021年10月18日
    40

发表回复

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

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