我找了一个css的图片变换的代码 但是如何做成背景图片 css里怎么给背景图片变透明点 给图片的div加什么代码才能...
css\u4ee3\u7801\u5982\u4f55\u628a\u80cc\u666f\u56fe\u65cb\u8f6c1\u3001\u9996\u5148\u51c6\u5907\u4e00\u4e2aHTML\u6587\u6863\uff0c\u6587\u6863\u4e2d\u51c6\u5907\u597d\u4e24\u4e2a\u56fe\u7247\uff0c\u63a5\u4e0b\u6765\u4f1a\u5bf9\u8fd9\u4e24\u4e2a\u56fe\u7247\u8fdb\u884c\u65cb\u8f6c\u3002
2\u3001\u7136\u540e\u5bf9HTML\u4e2d\u7684\u5185\u5bb9\u5b9a\u4e49\u4e00\u4e9b\u6837\u5f0f\uff0c\u5982\u4e0b\u56fe\u6240\u793a\uff0c\u4e3b\u8981\u662f\u6807\u9898\u4ee5\u53caul\u7684\u6837\u5f0f\u3002
3\u3001\u63a5\u4e0b\u6765\u5c31\u7ed9\u56fe\u7247\u6240\u5728\u7684li\u5b9a\u4e49\u5bbd\u9ad8\uff0c\u5982\u4e0b\u56fe\u6240\u793a\u3002
4\u3001\u7136\u540e\u7ed9\u56fe\u7247\u8bbe\u7f6e\u8fc7\u6e21\u6548\u679c\uff0c\u8fc7\u6e21\u4f7f\u7528transition\u5c5e\u6027\uff0c\u5982\u4e0b\u56fe\u6240\u793a\u3002
5\u3001\u5f53\u9f20\u6807\u60ac\u505c\u5728\u56fe\u7247\u4e0a\u65f6\uff0c\u901a\u8fc7rotate\u7ed9\u5176\u8bbe\u7f6e\u53d8\u5f62\uff0c\u5982\u4e0b\u56fe\u6240\u793a\uff0c\u6b63\u6570\u4ee3\u8868\u7684\u662f\u987a\u65f6\u9488\uff0c\u8d1f\u6570\u4ee3\u8868\u7684\u662f\u9006\u65f6\u9488\u3002
6\u3001\u6700\u540e\u8fd0\u884c\u7a0b\u5e8f\uff0c\u4f1a\u770b\u5230\u5982\u4e0b\u56fe\u6240\u793a\u7684\u6548\u679c\uff0c\u9f20\u6807\u653e\u5728\u56fe\u7247\u4e0a\u4f1a\u987a\u65f6\u9488\u6216\u8005\u9006\u65f6\u9488\u65cb\u8f6c\u3002
1\u3001\u65b0\u5efahtml\u6587\u6863\uff0c\u5728body\u6807\u7b7e\u4e2d\u6dfb\u52a0\u4e00\u4e2aimg\u6807\u7b7e\uff0c\u8fd9\u65f6\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u56fe\u7247\u662f\u4e0d\u900f\u660e\u7684\uff1a
2\u3001\u5728head\u6807\u7b7e\u4e2d\u6dfb\u52a0style\u6807\u7b7e\uff0c\u5728style\u6807\u7b7e\u4e2d\u4e3aimg\u6807\u7b7e\u8bbe\u7f6e\u900f\u660e\u5ea6\u6837\u5f0f\uff0c\u5176\u4e2d\u4e09\u4e2a\u5c5e\u6027\u662f\u4e3a\u4e86\u517c\u5bb9\u4e0d\u540c\u6d4f\u89c8\u5668\uff1a
3\u3001\u5237\u65b0\u6d4f\u89c8\u5668\u4e2d\u7684\u9875\u9762\uff0c\u8fd9\u65f6\u53ef\u4ee5\u53d1\u73b0\u6d4f\u89c8\u5668\u4e2d\u56fe\u7247\u7684\u900f\u660e\u5ea6\u6539\u53d8\u4e86\uff0c\u900f\u660e\u5ea6\u7684\u8303\u56f4\u662f0-1\uff0c0\u8868\u793a\u5b8c\u5168\u900f\u660e\uff0c1\u8868\u793a\u4e0d\u900f\u660e\uff1a
把四个<div class="pic"><img src="图片路径" width="200" height="100" /></div>里的<img src="图片路径" width="200" height="100" />全部删除就可以了
.TKS
楼主是否想要这样子的效果？
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<title>无标题文档</title>
</head>
<body>
<div id="box">
<div class="pic"><img src="01.jpg" width="200" height="100" /></div>
<div class="pic"><img src="02.jpg" width="200" height="100" /></div>
<div class="pic"><img src="03.jpg" width="200" height="100" /></div>
<div class="pic"><img src="04.jpg" width="200" height="100" /></div>
</div>
<style type="text/css">
#box{position:relative; width:200px; height:100px;}
.pic{position:absolute; top:0; left:0; width:200px; height:100px; z-index:99; display:none;}
</style>
<script type="text/javascript">
$(window).ready(function(){
$("#box .pic").eq(0).show();
for(var j=0;j<$("#box .pic").length;j++){
var pic = $("#box .pic").eq(j);
var attr = pic.find('img').attr('src');
pic.css("background","url("+attr+")");
pic.html("");
}
var i=0;
function fad(){
var m = i%4;
var n = (i+1)%4;
$("#box .pic").eq(m).fadeOut(1000);
$("#box .pic").eq(n).fadeIn(1000);
i++;
};
int = setInterval(fad,3000);
});
</script>
</body>
</html>
绛旓細鏈枃鏄函绮瑰埄鐢CSS锛岃鈥滃崟涓涓鈥漝iv锛屼粠姝ｄ笁瑙掑舰鍙樻崲涓烘鍏竟褰紙鍗曚竴div鏈澶氬彧鑳藉仛鍒版鍏竟褰級锛屾渶鍚庡啀鎼厤鍔ㄧ敾鐨勬晥鏋滐紝鍙樻垚姝ｅ杈瑰舰鐨勫彉鎹㈠姩鐢伙紝涔熺敱浜庢澶氳竟褰㈤渶瑕佺敤鍒颁笉灏戠殑涓夎鍑芥暟璁＄畻锛屼负浜嗘柟渚胯捣瑙侊紝杩欓噷灏嗘澶氳竟褰㈢殑杈圭粺涓閮借涓100px銆傛涓夎褰㈡涓夎褰笉闇瑕佺敤鍒颁吉鍏冪礌锛屽彧闇瑕佽瀹歱鏈韩...
绛旓細璇曡瘯杩欎釜鍥剧墖鍔ㄦ佸垏鎹 鏈12345鏁板瓧涓璧峰垏鎹 榧犳爣鐐逛竴涓嬫暟瀛椾細鍙樻崲鍒板彟涓寮犲浘鐗囷紝涓嶇偣灏变細鑷姩鎹 閲岄潰鏈夋暀绋嬪拰婧愮爜
绛旓細棣栧厛锛屼綘璇寸殑妗嗭紝鏄笉鏄寚鐨勪綘鑳屾櫙鍥剧墖涓婄殑妗嗭紝鍦ㄦ垜杩欓噷鐪嬩笉鍒颁綘璇寸殑妗嗘槸涓粈涔堟牱瀛愩傜浜岋紝璋冩暣鏂囧瓧鍦ㄦ涓殑浣嶇疆鍙互浣跨敤padding銆乴ine-height锛岃繖浜涗綘閮借瘯杩囦簡娌℃湁锛熺涓夛紝浣犵殑css鍜宩s鍩虹鐭ヨ瘑璨屼技涓嶆槸寰堟墡瀹烇紝鐪嬩綘鐨刪tml浠ｇ爜锛屼綘鐨勯摼鎺ョЩ杩囩Щ鍑烘槸閫氳繃琛屽唴鍐呭祵js浠ｇ爜鏉ュ疄鐜扮殑锛宱nmousemove鐨勬剰鎬...
绛旓細HTML涓浘鐗杞挱浠ｇ爜濡備笅锛<!DOCTYPE html>鍥剧墖杞挱浠ｇ爜 body{max-width: 640px;margin: 0 auto;} #lunbo ul li{width:100%;list-style: none;width:640px; height:250px;background-color: #f00;text-align: center;} #lunbo ul li:not(:first-child){display: none;} ...
绛旓細娉ㄦ剰锛 animation鍚屾牱瀛樺湪绠鍐欙紝灏嗘牱寮忓间互绌烘牸闅斿紑锛屼笉鍖哄垎鍏堝悗锛屼袱涓椂闂村悓鏃跺嚭鐜帮紝绗涓涓涓烘挱鏀炬椂闂达紝绗簩涓负寤惰繜鏃堕棿銆備竴浜css3鏍峰紡鍙湪閮ㄥ垎娴忚鍣ㄧ敓鏁, 鍙互閫氳繃娣诲姞鍏煎鍓嶇紑鐨勫舰寮忔潵瀵归儴鍒嗕綆鐗堟湰娴忚鍣ㄥ吋瀹 渚嬪: transition: all 1s linear; -webkit-transition: all 1s linear; -...
绛旓細鍦ㄥ墠绔紑鍙戜腑锛屾垜浠噰鐢ㄧ殑鍔ㄧ敾鏂规鏈変富甯у姩鐢 銆 琛ラ棿鍔ㄧ敾銆侀楠煎姩鐢 绛夌瓑 鍊熷姪css3鐨則ransform锛屾垜浠彲浠ュ疄鐜板緢娴佺晠鐨勮ˉ闂村姩鐢 濡傛灉鐗╀綋鍙戠敓浜嗕笂闈㈢殑鍑犵鍙樻崲锛屽彲浠ユ妸涓婇潰鎵鏈夌煩闃典緷娆″簭鐩镐箻锛岀劧鍚庡氨寰楀埌浜嗘渶缁堢殑鍙樻崲鐭╅樀 鐢辨鎴戜滑鍙互鐪嬪嚭鏉 涓涓猚ss鍙樻崲涓捐瘉 M 鎬诲彲浠ュ啓鎴愪竴涓 M = SRT ...
绛旓細Sorry锛屾櫘閫氱殑閾哄瓙鏈ㄦ湁鏉冮檺锛屾槸娌℃硶浣跨敤JS鎴栬呰繖绉CSS鐨銆傚彧鏈2涓姙娉 1銆佽喘涔拌淇競鍦虹殑妯＄増 2銆佸湪瑁呬慨甯傚満鐢宠璁捐甯堟潈闄 [JS鍙樻崲鍥剧墖鐨勫浘鐗浠ｇ爜]褰撻紶鏍囨病鏈夋寚鍦ㄤ笂闈㈡椂锛屾樉绀虹殑鏄鍥剧墖1锛屽綋榧犳爣婊戣繃鏃讹紝浼氳嚜鍔ㄥ彉鎴愬浘鐗2銆 浣嗘槸杩欎釜浠ｇ爜鍦ㄦ窐瀹濇嫇灞曞簵閾 瀹炵幇涓嶄簡銆俒CSS]榧犳爣涓嶆斁鏃舵樉绀1.jpg锛岄紶鏍囨粦杩...
绛旓細鍙互鐢css浠ｇ爜瀹炵幇锛岄粯璁ょ姸鎬佷笅涓涓鏍峰紡锛屽綋榧犳爣缁忚繃鐨勬椂鍊欐崲鎴愬彟涓绉嶆牱寮忥紝姣斿锛 .pp td a{ width:200px; height:292px; background:url(images/index_05_01_01.jpg);/*榛樿鍥剧墖鍦板潃*/ display:block;}.pp td a:hover{ width:200px; height:292px; background:url(images/index_05_01_...
绛旓細涓嶈兘涓婁笅灞呬腑锛氬湪.home鏍峰紡閲屾病鏈夎缃楂橈紝褰撶劧涓嶈兘灞呬腑浜嗭紝鍔犱笂line-height:102px;鍗冲彲.涓嶈兘鏀瑰彉棰滆壊锛氶紶鏍囨粦杩噃over鐘舵佹病鏈夎缃鑹叉敼鍙橈紝鍔犱笂濡傜孩鑹 color:red 鍗冲彲.font-color杩欐牱鍐欐槸閿欒鐨勶紝鍦╤tml涓彲浠ョ洿鎺ュ啓 red text锛屽湪css涓鐩存帴鍐檆olor:red;...
绛旓細鍙槸璁剧疆瑙嗚浠涔堢殑銆備粬浠殑瀛愬厓绱犺缃彉鍖栥2銆乷ne锛宼wo锛岃繖浜涘厓绱犱娇鐢ㄤ簡缁濆瀹氫綅銆備娇鐢ㄧ粷瀵瑰畾浣嶄富瑕佹槸锛屽ぇ瀹鍙樻崲浠ュ悗涓棿鏈夌┖闅欙紝涓轰簡娑堥櫎绌洪殭锛屼娇鐢╰ranslate3d瀵筜杩涜鍙樻崲娑堥櫎绌洪殭搴旇鏄笉琛岀殑锛屽洜涓哄彉鍖栦互鍚庣浉閭讳袱涓浘褰㈠ぇ灏忎笉涓鑷翠簡銆傚綋鐒3D绌洪棿涓袱涓笉涓鏍峰ぇ鐨勪笢瑗垮湪鍥剧墖涓婄湅璧锋潵涓鏍峰ぇ锛屽簲璇ヤ篃鏄彲浠...
