HTML全屏背景图

当我们在写前端页面的时候为了页面的美观我们通常会为页面设置图片背景,那么我们如何来设置全屏的背景图呢???

设置全屏背景图需要三个属性

			background-image: url(img/untitled.png);background-repeat: no-repeat;background-size: cover;

案例说明

设置背景图片
代码设置

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style>body{background-image: url(img/untitled.png);}</style><body></body>
</html>

样式欣赏(出现好多张,并不是我们想要的全屏背景图)
在这里插入图片描述
设置相关属性之后

代码设置

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style>body{background-image: url(img/untitled.png);background-repeat: no-repeat;background-size: cover;}</style><body></body>
</html>

样式欣赏(全屏背景图显示)
在这里插入图片描述
此时的显示是我们想要的效果。

了解更多关注我哟!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/565698.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【youcans 的 OpenCV 例程200篇】121. 击中-击不中用于特征识别

欢迎关注 『youcans 的 OpenCV 例程 200 篇』 系列&#xff0c;持续更新中 欢迎关注 『youcans 的 OpenCV学习课』 系列&#xff0c;持续更新中 【youcans 的 OpenCV 例程 200 篇】121. 击中-击不中用于特征识别 击中-击不中是形态检测的基本工具&#xff0c;可以实现对象的细…

存储过程双层循环_别出心裁,为锂金属负极贴上“双层保护膜”!

第一作者&#xff1a;Yang Zhao、Maedeh Amirmaleki通讯作者&#xff1a;TobinFilleter、蔡梅、孙学良通讯单位&#xff1a;加拿大多伦多大学、通用汽车研发中心、加拿大西安大略大学研究亮点&#xff1a;1.提出了锂金属负极“双层保护膜”的概念。2.通过ALD/MLD精确控制双层保…

Anaconda安装Wordcloud库失败的解决办法

主要安装出现了如下问题&#xff1a; 当时我也不知道这是出了什么问题&#xff0c;后来我就试试另一个办法安装Wordcloud&#xff0c;因此记录一下&#xff1a; 1、查看自己的Anaconda使用的python版本号 方法&#xff1a;进入Anaconda Prompt&#xff0c;输入python -V 2…

拼图游戏

使用JS制作了一款拼图游戏供大家参考。 原理分析&#xff1a; 1.鼠标的点击和松开事件 2.显示原图作为参考 3.方块的移动替换 4.是否完成拼图的判断 5.完成之后会弹窗提示 效果演示 代码展示 <!DOCTYPE html> <html><head><meta charset"UTF-8&qu…

【youcans 的 OpenCV 例程200篇】122. 形态算法之边界提取

欢迎关注 『youcans 的 OpenCV 例程 200 篇』 系列&#xff0c;持续更新中 欢迎关注 『youcans 的 OpenCV学习课』 系列&#xff0c;持续更新中 【youcans 的 OpenCV 例程 200 篇】122. 形态算法之边界提取 3. 形态学算法 形态学处理的主要应用是提取图像中用来表示和描述形状…

人机协作机器人发展趋势_发那科童梁:机器人化不是时髦!有效的人机协作投资回报率更高...

编者按&#xff1a;此文是根据上海发那科机器人有限公司技术部部长童梁于2019年5月在浙江宁波余姚举行的第六届中国机器人峰会上的《物联网浪潮下的智能制造》报告录音整理摘编部分而成&#xff0c;题目为编者所加。随着“中国制造2025”的不断推进&#xff0c;越来越多制造业企…

做一个关于我和她微信聊天记录的爱心词云图

前言&#xff1a; 因为最近接触到了词云图&#xff0c;所以就想做一个关于和女朋友聊天的词云图,但是现在很少使用QQ了&#xff0c;所以就不得不使用微信导出聊天记录。于是我坐在电脑面前查阅资料查了一天&#xff0c;但是在走到快导出微信聊天记录的时候&#xff0c;还是被…

【youcans 的 OpenCV 例程200篇】123. 形态算法之孔洞填充

欢迎关注 『youcans 的 OpenCV 例程 200 篇』 系列&#xff0c;持续更新中 欢迎关注 『youcans 的 OpenCV学习课』 系列&#xff0c;持续更新中 【youcans 的 OpenCV 例程 200 篇】123. 形态算法之孔洞填充 3. 形态学算法 形态学处理的主要应用是提取图像中用来表示和描述形状…

弹框提示

jquery弹框提示框的实现。 原理分析 1.点击按钮出现弹框 2.设置弹框标题和内容 3.设置取消和确定两个按钮 4.点击确定继续执行 5.点击取消返回此页面 效果演示 原始样式 点击之后 点击确认按钮 代码演示 在开始我们的程序之前注意&#xff1a; 引入Jquery.js架包 <…

el-tooltip位置不灵活_美团研究院:超五成生活服务业商户有灵活用工需求

更多精彩&#xff0c;请点击上方蓝字关注我们&#xff01;美团研究院于 9 月 15 日发布《生活服务业新就业形态和灵活就业的发展特征和发展趋势》报告&#xff0c;报告指出我国目前灵活用工岗位类型众多&#xff0c;是从业者的重要收入来源&#xff0c;从业者通过灵活就业拓宽了…

【youcans 的 OpenCV 例程200篇】124. 孔洞填充的泛洪算法

欢迎关注 『youcans 的 OpenCV 例程 200 篇』 系列&#xff0c;持续更新中 欢迎关注 『youcans 的 OpenCV学习课』 系列&#xff0c;持续更新中 【youcans 的 OpenCV 例程 200 篇】124. 孔洞填充的泛洪算法 3. 形态学算法 形态学处理的主要应用是提取图像中用来表示和描述形状…

域名可以转让注册人吗_网店可以转让吗?

随着经济市场的快速发展&#xff0c;市场决定需求&#xff0c;所以有很多人紧跟时代&#xff0c;选择了天猫店铺。有一些人想可以不可以购买网店&#xff0c;网店可以转让吗&#xff0c;可以直接经营吗&#xff1f;还有一些人在一同经营之后&#xff0c;或许是业绩不佳或许是有…

java - 菱形输出

程序首先会让你输入一个奇数&#xff0c;即将要生成菱形的总行数&#xff0c;当你输入奇数后按Enter按键就会在控制台看到此菱形了。 效果演示&#xff1a; 代码展示 package com.zsh;import java.util.Scanner;public class lingxing {public static Scanner input new Sc…

MySQL的DDL(数据定义语言)

笔记本 SQL语言一共分为4大类&#xff1a; DQL&#xff08;数据查询语言&#xff09;、 DDL&#xff08;数据定义语言&#xff09;、 DML&#xff08;数据操纵语言&#xff09;、 DCL &#xff08;数据控制语言&#xff09; 本文就介绍的是其中的DDL&#xff08;Data D…

【youcans 的 OpenCV 例程200篇】125. 形态算法之提取连通分量

欢迎关注 『youcans 的 OpenCV 例程 200 篇』 系列&#xff0c;持续更新中 欢迎关注 『youcans 的 OpenCV学习课』 系列&#xff0c;持续更新中 【youcans 的 OpenCV 例程 200 篇】125. 形态算法之提取连通分量 3. 形态学算法 形态学处理的主要应用是提取图像中用来表示和描述…

2评分标准多少分_高新企业认定评分标准,需要多少分才能拿到高新认证证书...

在高新技术企业认定工作中&#xff0c;企业要想成功拿到高新认证证书&#xff0c;那么就必须要符合高新企业认定评分标准&#xff0c;只有达到异地拿到评分数之后&#xff0c;企业才有可能拿到高新认证证书。根据相关文件的规定&#xff0c;我们在申请高新企业认定过程中&#…

java - 猴子吃桃

著名的猴子吃桃问题&#xff0c;计算摘桃子的个数。 猴子吃桃问题&#xff1a;猴子第一天摘下若干个桃子&#xff0c;当即吃了一半&#xff0c;还不瘾&#xff0c;又多吃了一个 第二天早上又将剩下 的桃子吃掉一半&#xff0c;又多吃了一个。以后每天早上都吃了前一天剩下 的一…

【youcans 的 OpenCV 例程200篇】126. 形态算法之凸壳(Convex hull)

欢迎关注 『youcans 的 OpenCV 例程 200 篇』 系列&#xff0c;持续更新中 欢迎关注 『youcans 的 OpenCV学习课』 系列&#xff0c;持续更新中 【youcans 的 OpenCV 例程 200 篇】126. 形态算法之凸壳 3. 形态学算法 形态学处理的主要应用是提取图像中用来表示和描述形状的元…

java - 人员分配组合

在进行体育赛事比赛的时候往往会因为对比赛队员的组合排序而烦恼&#xff0c; 下面程序能够帮助进行队列组合的分配。 有两个乒乓球队进行比赛&#xff0c;各出三人。甲队为 a,b,c 三人&#xff0c;乙队为 x,y,z 三人。已抽签决定比赛名单。 有人向队员打听比赛的名单。a 说他…

【youcans 的 OpenCV 例程200篇】127. 形态算法之细化

欢迎关注 『youcans 的 OpenCV 例程 200 篇』 系列&#xff0c;持续更新中 欢迎关注 『youcans 的 OpenCV学习课』 系列&#xff0c;持续更新中 【youcans 的 OpenCV 例程 200 篇】127. 形态算法之细化 3. 形态学算法 形态学处理的主要应用是提取图像中用来表示和描述形状的元…