PDA

View Full Version : تغییر موقعیت عکس



farazsahebdel
جمعه 01 اسفند 1393, 23:00 عصر
سلام
می دوعکس رو میخوام تو این صفحه با بالا پایین آوردن اسکرول قسمت های مختلف عکس به نمایش در بیاد.
ولی عکس دومی به نمایش در نمیاد !


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.rtl.css">
<title>قالب ساده</title>
<style type="text/css">
.a{
border:#612358 solid 1px;
background-color:#612358;
width:100%;
height:800px;
}
.b{
border:#321581 solid 1px;
background-color:#321581;
width:100%;
height:1000px;
}
.bg{
background: url('1.jpg') no-repeat;
position: fixed;
width: 100%;
height: 1000px; /*same height as jumbotron */
top:0;
left:0;
z-index: -1;
}
.bg2{
background: url('2.jpg') no-repeat;
position: fixed;
width: 100%;
height: 1000px; /*same height as jumbotron */
top:0;
left:0;
z-index: -1;
}
</style>
</head>
<body>
<div class="a"></div>
<br /><br /><br />
<div class="bg"></div>
<br /><br /><br />
<div class="b"></div>
<br /><br /><br />
<div class="bg2"></div>
<br /><br /><br />
<div class="b"></div>
</body>
</html>

Omid Jackson
شنبه 02 اسفند 1393, 02:34 صبح
دقیقا منظورتون رو نفهمیدم ولی عکس ها میفتن روی هم، مهم نیست چند تا br استفاده کنین، شما اون رو fixed دادین، بعد top رو 0 کردین، با اسکرول ثابت میمونن ولی از بالا هیچ فاصله ای ندارن
البته اگر میشه نمونه آنلاین نشون بدین خیلی بهتره

farazsahebdel
شنبه 02 اسفند 1393, 10:25 صبح
من نمی خوام روی هم قرار بگیرن اولی می خوام عکس 1 قسمت پایینی عکس 2 باشه کد رو به چه صورت تغییر بدم ؟

Omid Jackson
شنبه 02 اسفند 1393, 16:55 عصر
ارتفاع عکس اول رو به top عکس دوم بدین
البته اینجور که شما نوشتین عکس ها ارتفاع 1000 پیکسلی دارن که از صفحه میاد بیرون (بستگی به رزولوشن و اندازه پنجره داره) باز نشون نمیده
شما برای اینکه مطمئن بشین کدتون درست کار میکنه اول اول به یکی از bg ها left بدین بیاد جلوتر
چون position رو fixed دادین و بعدش top رو 0 دادین و left رو هم 0 دادین اینا رو نسبت به پنجره میگیره نه المنت بالاییش