『壹』 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>
對於這些知識在一個叫秒秒學的教程網站上有相關的學習資料，有興趣的可以自己去看看，希望對你有幫助。