css让背景图片自适应屏幕大小_css怎么设置背景图的宽高

css让背景图片自适应屏幕大小_css怎么设置背景图的宽高css怎么设置背景图片自适应大小

在css中,可以利用“background-size”属性设置背景图片自适应大小,该属性用于设置背景图片的大小,只需要给背景图片元素添加“background-size:cover;”样式,即可使背景图片的大小自适应。

css让背景图片自适应屏幕大小_css怎么设置背景图的宽高

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

css怎么设置背景图片自适应大小

在css中,可以利用background-size属性设置背景图片的自适应大小,该属性用于指定背景图片大小。当该属性的值为cover时,此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

下面我们通过设置页面背景图片自适应来看一下,示例如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

<style>

body{

    background-image:url("1118.02.png") ;

    background-size:cover;

}

</style>

</head>

<body>

</body>

</html>

输出结果:

css让背景图片自适应屏幕大小_css怎么设置背景图的宽高

 

 完

 

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

文章由思创斯整理,转载请注明出处:https://ispacesoft.com/62099.html

(0)

相关推荐

  • windows安装git和环境变量配置「终于解决」

    windows安装git和环境变量配置「终于解决」转自 https://wuzhuti.cn/2385.htmlGit是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。Git是一个开源的分布式版本控制系统,用以有效、高速的处理从很小到非常大的项目版本管理。Git是LinusTorvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。演示版本2.6.1

  • appscan使用教程完整版_APPscan

    appscan使用教程完整版_APPscanRationalAppScan可自动化Web应用的安全漏洞评估工作,能扫描和检测所有常见的Web应用安全漏洞,例如SQL注入(SQL-injection)、跨站点脚本攻击(cross-sitescripting)、缓冲区溢出(bufferoverflow)及最新的Flash/Flex应用及Web2.0应用曝露等方面安全漏洞的扫描。②仅应用程序:包含所有应用程序级别的测试,但不包含侵入式和端口侦听器。③仅基础结构:包含所有基础结构级别的测试,但不包含侵入式和端口侦听器。

  • php怎么删除某个文件

    php怎么删除某个文件php删除某个文件的方法:首先创建一个PHP示例文件;然后声明一个需要删除的文件路径;最后通过PHP中的unlink函数直接删除指定文件即可。

  • 如何免费注册一个域名账号_个人免费注册域名

    如何免费注册一个域名账号_个人免费注册域名1、今天教大家如何不花钱免费获取一个商用域名,首先打开浏览器,新建一个无痕窗口,然后在无痕模式下输入freenom.com,进入网站是这样的界面:2、由于海外环境原因,如果打不开网站或者打开慢的请使用那个啥,#梯-z1i#。3、最长可以选择免费一年,到期前2个星期会提醒是否续费,到时直接可以免费续费再用一年,相当于永久免费。一、申请域名1、进入网站,查询自己想要的域名是否可用。可以看到有tk、ml、ga、cf、gq等域名后缀可选,都是免费的2、选择域名点击现在获取完成_如何申请免费域名

    2023年11月25日
  • vue组件封装过程_vue组件传值的五种方法

    vue组件封装过程_vue组件传值的五种方法组件封装

  • 利用纯真ip库搭建ip查询服务[通俗易懂]

    利用纯真ip库搭建ip查询服务[通俗易懂]前言:前段时间听过了纯真ip数据库,只知道是一个qqwry.dat文件,里面有一些网友收集的数据,可以用来查询ip的大致位置,即ip定位。正好,我最近在一个项目里面看到了这个数据库,它就是将qqwry.dat集成到springboot项目里面,做成一个查询服务来使用的。所以,我也想来试试,但是我不是直接使用qqwry.dat这个文件。我换一种方式,我才用将qqwry.dat中的ip数据导入mysql数据库中,通过数据库的查询来提供ip位置查询功能。gitee代码地址:纯真ip库服务搭建数据准备首先

  • jmeter下载PDF到本地并清除测试数据[通俗易懂]

    jmeter下载PDF到本地并清除测试数据[通俗易懂]jmeter下载PDF到本地并清除测试数据【执行测试】>>>>获取下载PDF地址 使用JSON提取器提取响应数据中的URL。 截取url后缀路径。(BeanShell后置处理程序) importorg.apache.commons.lang.StringUtils;Stringss=StringUtils.substringBeforeLast(“${downloadurl}”,”/”);Stringsss=StringUtils.substringA.

  • 安装flash插件_Ubuntu浏览器[通俗易懂]

    安装flash插件_Ubuntu浏览器[通俗易懂]下载地址:http://get.adobe.com/flashplayer/下载install_flash_player_11_linux.x86_64.tar.gz解压后cd到解压的文件夹下将(1)libflashplayer.so拷贝到Firefox的Plugin目录:sudocplibflashplayer.so/usr/lib/mozilla/pl_armubuntu版flash插件下载

    2023年10月21日

发表回复

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

联系我们

关注“Java架构师必看”公众号

回复4,添加站长微信。

附言:ispacesoft.com网而来。

关注微信