背景图片适应屏幕大小的一些方法

news/2024/11/16 9:52:03/

背景图片适应屏幕大小的一些方法
想要背景图片适应屏幕的大小,背景图片要足够大,可以铺满常用的所有屏幕,还要图片要高清,不能一拉伸就失真,不能显示局部的时候显得很怪异。

方法一: 运用ul的宽度自适应特性

    <title>运用ul的宽度自适应特性</title><style>*{margin: 0;padding: 0}ul li{list-style: none;}.bg{overflow: hidden;z-index: -1;height: 100%;}.bg_img img{width: 100%;}</style><script src="js/jquery-1.10.1.min.js"></script>
</head>
<body>
<div class="bg"><ul><li class="bg_img"><img src="images/bg_1.jpg"></li></ul>
</div>
<script>$(function () {var height =  window.screen.availHeight ;$(".bg_img img").css("height",height);})
</script>

注意:背景图片的z-index为负数。如图。
这里写图片描述

方法二:背景图片两侧模糊,颜色和整个区域的背景颜色一样

<style>
.inner{position:relative;width:"图片宽度";margin:auto;}
</style><div style="width:100%;backgroud-color:rgba();"><div class="inner"><img src=""></div></div>

把图片完整的放进div,把父级div的背景颜色设成和图片两侧颜色相同的。具体可参照百度开发者工具里的轮播。


http://www.ppmy.cn/news/440149.html

相关文章

微信小程序开发:设定背景图片

文章目录 前言&#xff1a;一、原因与解决方法二、其他设置背景图片的方式1、获取网络图片2、将图片转换成base64格式3、使用image标签 前言&#xff1a; 今天在开发小程序的时候用到背景图片设定功能&#xff0c;但请求本地资源的图片时却提示错误&#xff0c;无法加载本地资…

css 图片放大1.2倍,二倍图以及背景图缩放

物理像素与物理像素比 物理像素点指的是屏幕显示的最小颗粒,是物理世界中真实存在的。这是厂商在出厂时就设置好了,比如苹果6是750*1334 而我们开发时用的 px 并不等同于像素,即 1px 不一定等于 1个物理像素点 在pc端页面,1个px等于1个物理像素,但移动端就不尽相同,如 iph…

【python--爬虫】千图网高清背景图片

爬取的网页是:千图网背景图片模块 查看背景图片的网页代码(右键–>【查看元素】/f12 / fn + f12) url链接【www.58pic.com/newpic/33945157.html】 进入了图片的高清大图页面 我们可以通过爬取最开始打开的页面的源代码进入对应的背景图片的详情页面. # 使用的utf-8编码 …

【python--爬虫】千图网高清背景图片爬虫

最近有读者反映想要下载千图网的高清背景图片&#xff0c;但是需要会员才能下载&#xff0c;而且需要的量非常大&#xff0c;问博主有没有办法能免费下载这些图片。 付费&#xff0c;不存在的o(&#xffe3;▽&#xffe3;)o&#xff01;&#xff0c;博主今天讲解如何通过pytho…

5.controller部署nova服务

nova 服务是 OpenStack service 计算服务&#xff0c;负责维护和管理云环境的计算资源&#xff1b; 例如&#xff1a; 接收客户端请求需要的计算资源&#xff1b; 确定实例在哪个物理机上创建&#xff1b; 通过虚机化的方式将实例启动运行等工作。 controller节点 在安装和配…

第九章 形态学图像处理

文章目录 9形态学图像处理9.2腐蚀与膨胀9.2.1腐蚀9.2.2膨胀 9.3开操作和闭操作9.5一些基本形态学方法9.3.1边界提取 9.6灰度级形态学9.6.3一些基本的形态学算法 9形态学图像处理 9.2腐蚀与膨胀 9.2.1腐蚀 imgcv2.imread(dige.png,0) kernel np.ones((3,3),np.uint8) num[[…

软件管理Linux

1. 获取程序包的途径 系统发行版的光盘或官方的服务器 http://mirrors.aliyun.comhttp://mirrors.sohu.comhttp://mirrors.163.com 项目官方站点第三方组织 Fedora-EPEL&#xff08;推荐&#xff09;搜索引擎&#xff1a; http://pkgs.org http://rpmfind.net http://rpm.pbon…

2023年网络安全竞赛——网络安全应急响应Server2228

网络安全应急响应 任务环境说明&#xff1a; 服务器场景&#xff1a;Server2228&#xff08;开放链接&#xff09; 用户名&#xff1a;root&#xff0c;密码&#xff1a;pssw0rd123 1. 找出被黑客修改的系统别名&#xff0c;并将倒数第二个别名作为Flag值提交&#xff1b…