‘壹’ html5中要将一个图片hover背景扩大，求大神给个思路
先声明个人意见，因为我没做个哈
先做个容器改成圆形，然后做个正方形的div分成四份，旋转45度，点击更换背景，搞定
‘贰’ html5 怎么让图片自适应
图片分为背景图片和通过img标签引入的图片，前者可以通过media query自动的切换不同分辨率的版本，但是在不支持background image size的浏览器中背景图片无法无级的调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但是没法儿获得两张分辨率中间大小的版本），而且在很多情况下（比如cms中）并不适合用背景图片。
如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片， 宽度> 768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。
这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。
响应式设计中对于图片的考虑应该从布局设计就开始，尽量使图片在各个窗口宽度下的尺寸不要相差过大，通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。
‘叁’ html5如何把一个图片设为页面的全屏背景
//HTML-Fromqifeiye.com
<imgsrc="images/bg.jpg"id="bg"alt="">
//CSS
#bg{
position:fixed;
top:0;
left:0;
/*Preserveaspetratio*/
min-width:100%;
min-height:100%;
}
或者
img.bg{
/*Setrulestofillbackground*/
min-height:100%;
min-width:1024px;
/*Setupproportionatescaling*/
width:100%;
height:auto;
/*Setuppositioning*/
position:fixed;
top:0;
left:0;
}
@mediascreenand(max-width:1024px){/*Specifictothisparticularimage*/
img.bg{
left:50%;
margin-left:-512px;/*50%*/
}
}或者
//HTML-Fromqifeiye.com
<imgsrc="images/bg.jpg"id="bg"alt="">
/CSS
#bg{position:fixed;top:0;left:0;}
.bgwidth{width:100%;}
.bgheight{height:100%;}
//jQuery
$(window).load(function(){
vartheWindow=$(window),
$bg=$("#bg"),
aspectRatio=$bg.width()/$bg.height();
functionresizeBg(){
if((theWindow.width()/theWindow.height())<aspectRatio){
$bg
.removeClass()
.addClass('bgheight');
}else{
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
‘肆’ html5 鼠标放在下面的图片时会放大显示图片。就像图片呢个效果呢样 需要怎么做。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
img{
width:200px;
height:200px;
}
divimg{
width:50px;
height:50px;
margin:30px;
}
</style>
</head>
<body>
<imgid="big"src=""alt="">
<div>
</div>
</body>
<script>
letarr=[
"http://iconfont.alicdn.com/t/1551939248493.jpeg@100h_100w.jpg",
"http://iconfont.alicdn.com/t/1550728574104.jpg@100h_100w.jpg",
"http://iconfont.alicdn.com/t/1550898018467.jpeg@100h_100w.jpg"
];
arr.forEach((item,index)=>{
if(!index){
document.querySelector("#big").setAttribute("src",item);
}
letimg=document.createElement("img");
img.setAttribute("src",item);
document.querySelector("div").appendChild(img);
})
document.querySelectorAll("divimg").forEach(item=>{
item.onmouseover=()=>{
document.querySelector("#big").setAttribute("src",item.getAttribute("src"));
}
})
</script>
</html>
请采纳
‘伍’ 我用html5 做了个手机网站 如何让图片本身100%放大
html5页面加入这段
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=no"/>
maximum-scale=2 表示页面最大放大2倍，这样你只要双击图片就可以实现放大了，如果是要js来实现的话 那就得写拖动插件了。 原理：先改变图片那个div的宽度为2倍然后定义那个div为绝对定位，这个div可以拖动（需要js来监听处理对应的函数）
所以简单的做还是就用浏览器自带的放大功能吧
‘陆’ html5怎样设置一个背景图片随着滚轮变动
我大概理解到了你的意思，是想实现背景的视觉差效果吧。如果是这个的话两种方法，
一种是设置background-attachment:fixed;背景固定了
另外一种就是利用 animate css3的属性，想兼容更多的浏览器建议用jquery控制。感觉应该是你想要的效果了。
你说的这个是单页面效果。我给你个网址上面有好多这样的 www.jq22.com
‘柒’ html5怎么设置整页背景图片
html5中设置整页背景图片的方法是利用css3样式：
写法如下：
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
效果如：
‘捌’ html 如何让背景图片充满全图，就是拉伸
使用此代码：<img border='0' src='/jpg' width='100%' height='100%' style='position: absolute;left:0px;top:0px;z-index: -1'>或者background-size:cover。
拓展资料
【HTML】
超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字符素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
【由来】
万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。
所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。
在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。
因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
‘玖’ html5手机页面背景图片自适应大小问题
1，输入position：fixed；top：0；left：0；将整个div固定在屏幕的顶部和左侧。
‘拾’ HTML5中，如何为图片制作放大镜效果
制作图片的放大效果我考虑到的方法是将原始图片绘制到canvas上，然后在对canvas进行局部裁剪最后对裁剪的部分进行放大，这样就可以实现放大镜的效果。
这里我给出一个实现这个想法的示例。该示例实际上就是运用HTML5canvas中对画布进行裁剪与保存画布状态的相关知识实现的。
上面是给出示例的效果图。这是不是你想要的放大镜效果呢？
下面我们来看下示例代码：在这个示例中当你点击图片时图片就会出现上图效果，再一次点击时就变成原始图片了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>放大镜</title>
<!—HTML代码设计：一个简单的canvas元素-->
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="345">
<p>你的浏览器不支持canvas元素</p>
</canvas>
</div>
<script>
window.onload=function() {
//获取canvas对象以及图片对象
var
canvas = document.getElementById('canvas'),
img = new Image(),
context = null,
dataUrl = null,
//设置一个标记，该标记的作用是控制我们点击canvas时放大镜效果的消失和出现
isMagnified = false,
//init函数只要是在图片加载时绘制出图形
init = function() {
img.onload = function() {
//绘制原始图片
context.drawImage(img, 0, 0);
//将图片信息转化为二进制信息或者URL信息存储在dataUrl中方便后面调用
dataUrl = canvas.toDataURL();
}
img.src = 'fist-pump-baby.jpg';
//设置标记值
isMagnified = false;
},
//magnify函数的作用是绘制具有放大镜效果的图形
magnify = function() {
//保存当前画布的绘制状态即画布绘制原始图片的状态。方便我们在后面恢复到绘制原始图片的状态
context.save();
//因为放大镜的圆圈和把手是通过canvas绘制的这里设置了一些绘制把手和圆圈的样式属性。
context.lineWidth = 10;//线条宽度
context.shadowColor = '#000';//阴影的颜色黑色
context.shadowBlur = 15;//模糊级别为15
context.shadowOffsetX = 5;//形状与阴影的水平距离5
context.shadowOffsetY = 5;//形状与阴影的垂直距离5
//保存画布当前状态即我们设置阴影属性后的状态方便后面使用
context.save();
//绘制出放大镜把手的图形
context.beginPath();
context.moveTo(230, 230);
context.lineCap = 'round';
context.lineWidth = 30;
context.lineTo(285, 285);
context.stroke();
//对图片进行裁剪，裁剪出的图形是一个圆形。
context.beginPath();
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true);
context.clip();
//创建一个新的Image对象，这个Image对象的图片资源是前面存储在dataUrl中的图片资源。所以这个Image对象和之前初始化的Image对象是完全一样的。
var magnified = new Image();
magnified.src = dataUrl;
//对Image对象进行放大1.5倍，并进行绘制。注意此时的画布状态时裁剪为一个圆形的状态，所以这里绘制的也仅仅是图片中的一个圆形区域。这里为了绘制出图片中娃娃的脸设置了绘制的图片有一定的偏移量。
context.scale(1.5, 1.5);
context.drawImage(img, -40, -40);
//调用restore()函数将画布状态恢复到绘制把放大镜把手时的状态，即具有阴影属性
context.restore();
//绘制放大镜的圆圈，即绘制刚刚我们裁剪出来图片的边框。这样刚刚裁剪出来的圆形图形就会正好处于放大镜的圆圈中。
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true);
context.stroke();
//重置画布，将画布恢复到绘制元素图片的状态，以方便绘制出放大效果后，再次点击是绘制原始图片。
context.restore()；
//设置标记值，实现点击后放大效果消失。
isMagnified = true;
};
//加载初始化代码，即当运行页面时会在页面绘制出一个原始图像
init();
//监听画布的点击事件，当点击页面的图像时会根据标记的值来进行判断是否对画布进行方大处理
$('canvas').click(function() {
if (isMagnified) {
init();//绘制原始图像
}
else {
magnify();//绘制放大的图像
}
});
}
</script>
<script src="jquery.js"></script>
</body>
</html>
对于这些知识在一个叫秒秒学的教程网站上有相关的学习资料，有兴趣的可以自己去看看，希望对你有帮助。