css如何讓圖片隨動_在html中如何讓圖片跟著滾動條而動

A. 怎樣用純CSS給圖片加一個滑鼠經過位移的效果

如果你想只向一移的話，你需要修改translate

-webkit-transform:translateY(100px);
-moz-transform:translateY(100px);

這樣才是向下移動100px，

因為translate
默認是移動XY軸的，意思就是說，移動左右以及上下一起，但是默認平移而已，

如果你想單獨操作Y的話，就要translateY，單獨操作X用translateX，當然默認translate
(100px)相當於translateX(100px)

如果你想向右移的同時又向下移

-webkit-transform:translate(100px,100px);
-moz-transform:translate(100px,100px);

這樣你應該能理解translate的用法了。。。

B. css背景圖片自適應

用background-size屬性，你想給他多大的百分比都可以，不設置表示默認圖片大小，設置100%表示全屏顯示圖片，按比例縮小或者放大。

這樣就可以實現背景圖片自適應父容器大小而自動變化，達到填充效果。但是，圖片會被拉伸填充，這並不是我們想要的效果，那麼我們可以不設置100%參數，而是使用cover參數。

設置cover參數以後，背景圖會按比例縮放填充滿整個背景。如果使用IE瀏覽器你會發現，上面的background-size:100% 100%;並沒有起到作用，圖片原本是怎樣就怎樣顯示，比較大就只能顯示一部分。

所以這時需要使用IE特有的濾鏡 AlphaImageLoader 兼容性在IE5.5+以上版本的瀏覽器上都可以完美運行。

1、enabled: 可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true|false_ true: 默認值。濾鏡激活。

2、false: 濾鏡被禁止。

3、sizingMethod: 可選項。字元串(String)。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。

4、crop: 剪切圖片以適應對象尺寸。

5、image: 默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。

6、scale: 縮放圖片以適應對象的尺寸邊界。

7、src: 必選項。字元串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數，濾鏡將不會作用。

特性:

1、Enabled: 可讀寫。布爾值(Boolean)。參閱 enabled 屬性。

2、sizingMethod: 可讀寫。字元串(String)。參閱 sizingMethod 屬性。

3、src: 可讀寫。字元串(String)。參閱 src 屬性。

說明:

在對象容器邊界內，在對象的背景和內容之間顯示一張圖片。並提供對此圖片的剪切和改變尺寸的操作。如果載入的是PNG格式，則0%-100%的透明度也被提供。

PNG格式的圖片的透明度不妨礙你選擇文本。也就是說，你可以選擇顯示在PNG格式的圖片完全透明區域後面的內容。這樣我們就可以完美兼容絕大多數的瀏覽器，實現用CSS讓背景圖片100%填充了。

C. 在html中如何讓圖片跟著滾動條而動

1、新建一個文件夾，用來存放網頁文件和圖片，快捷鍵ctrl+shift+n。

D. CSS 背景圖片如何隨頁面自動拉伸

background:url(../../config/img/Title.png) no-repeat;不重復
background:url(../../config/img/Title.png) repeat-x;橫向平鋪
background:url(../../config/img/Title.png) repeat-y;豎著鋪
什麼不加就是橫豎平鋪
如果你是想拉伸的話，豎著切一張幾個像素寬的背景圖（比如說寬2px，高990px這樣的一張圖），然後設置repeat-x，橫向平鋪。這樣看起來就像是一張大圖。這種方法適用於縱向漸變的背景。

E. 在div+css中，如何實現圖片跟隨滑鼠任意移動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>滑鼠的距離</title>
<script type="text/javascript">
var mouseX;
var mouseY;
function show(event) {
var infoDiv = document.getElementById('infoDiv');
mouseOver(event);
document.getElementById("a").innerHTML = mouseX+" "+mouseY ;
infoDiv.style.display = "block";
infoDiv.innerHTML = mouseX+" "+mouseY;
infoDiv.style.left = mouseX + 10 + "px";
infoDiv.style.top = mouseY + 10 + "px";
}
function hide() {
var infoDiv = document.getElementById('infoDiv').style.display = "none";;
}
function mouseOver(obj) {
e = obj || window.event;
// 此處記錄滑鼠停留在組建上的時候的位置, 可以自己通過加減常量來控制離滑鼠的距離.
mouseX = e.layerX|| e.offsetX;
mouseY = e.layerY|| e.offsetY;
}
</script>
</head>
<body>
<div onmousemove="show(event);" onmouseout="hide();" style="margin:150px ; background:#ff0; height:300px; width:300px; position:relative; ">滑鼠相對於觸發事件元素的位置<strong id="a"></strong>
<div id="infoDiv" style="display: none; position: absolute; width: 100px; height: 100px; background-color: #F1F19B;"></div>
</div>
</body>
</html>

兼容火狐哦

F. 關於CSS怎麼設置滾動背景圖

我建議你用css3來寫，就是寫一個小動畫

具體怎麼動，你改background-position的值就行了。

<style>
@keyframesanimatedBird{
0%{background-position:20px20px;}
50%{background-position:30px30px;}
100%{background-position:300px-90px;}
}
.animate-area{
background:url(....);
animation:animatedBird4slinearinfinite;
}
</style>
<divclass="animate-area"></div>

G. html css 不用fix怎麼讓圖片隨滾動條移動

這個是網頁「視差滾動」的效果，知乎有相關的回答網頁鏈接。

推薦的視差滾動插件：skrollr.js

H. 在css中怎麼設置滑鼠移上去圖片就會動

img:hover{ /*hover事件，當滑鼠移動到圖片時觸發*/
position: relative;
top: 20px;
right:10px;

}

I. 我用css讓一個圖片從左到右移動，有沒有什麼辦法當滑鼠移動到圖片上時，圖片停止移動，滑鼠放開後繼續

有動畫效果的是css3的transition、@keyframes、animation等，css要滑鼠移上去後改變狀態只能用:hover偽類，暫停動畫可以用設置animation-play-state:paused;，繼續動畫是animation-play-state:running;（可能需要設置添加-webkit-等私有前綴）其實動畫還是推薦jq，實現起來還是挺方便的，而且不用擔心瀏覽器兼容性。

給你寫個例子：

<!DOCTYPEhtml>
<html>
<head>
	<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
	<title>動畫暫停</title>
	<styletype="text/css">
	
	@keyframesmove
	{
		from{
			transform:rotate(0deg);
			left:0;
		}
		to{
			transform:rotate(360deg);
			left:600px;
		}
	}

	@-webkit-keyframesmove
	{
		from{
			-webkit-transform:rotate(0deg);
			left:0;
		}
		to{
			-webkit-transform:rotate(360deg);
			left:600px;
		}
	}

	@-zos-keyframesmove
	{
		from{
			-zos-transform:rotate(0deg);
			left:0;
		}
		to{
			-zos-transform:rotate(360deg);
			left:600px;
		}
	}

	@-o-keyframesmove
	{
		from{
			-o-transform:rotate(0deg);
			left:0;
		}
		to{
			-o-transform:rotate(360deg);
			left:600px;
		}
	}
	
	.box{
		animation:			move3salternateinfinite;
		-webkit-animation:	move3salternateinfinite;/*Safari和Chrome*/
		-moz-animation:		move3salternateinfinite;/*Firefox*/
		-o-animation:		move3salternateinfinite;/*Opera*/
		position:absolute;
		background-color:yellow;
		width:100px;
		height:100px;
	}
	.box:hover{
		-webkit-animation-play-state:paused;
	}
	</style>
</head>
<body>
	<divclass="box"></div>
</body>
</html>

J. css3如何讓圖片自動移動

自動移動，目前css3是有這樣的效果的，叫做css3動畫

給你一個示例

你要注意的一點是目前這個只能支持最低為IE10及以上版本才能夠運行的哦

Chrome 和 Safari 需要前綴 -webkit-。

本答案出自「我要編程」軟體開發師訓練平台免費課程。

<!DOCTYPEhtml>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst5s;
-moz-animation:myfirst5s;/*Firefox*/
-webkit-animation:myfirst5s;/*SafariandChrome*/
-o-animation:myfirst5s;/*Opera*/
}

@keyframesmyfirst
{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}

@-moz-keyframesmyfirst/*Firefox*/
{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}

@-webkit-keyframesmyfirst/*SafariandChrome*/
{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}

@-o-keyframesmyfirst/*Opera*/
{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}
</style>
</head>
<body>

<p><b>注釋：</b>本例在InternetExplorer中無效。</p>

<div></div>

</body>
</html>

導航:首頁 > 圖片大全 > css如何讓圖片隨動

css如何讓圖片隨動

與css如何讓圖片隨動相關的資料