یاصر قدیمی

3 سال پیش توسط یاصر قدیمی مطرح شد

برای این کار از Z-index و Fixed position استفاده کنم

سلام دوستان میخواستم همچین چیزی رو طراحی کنم اما هیچ ایده ای ندارم که چجوری میشه این کار رو کرد .
لینک سایت در اینجا همون عکسی که وقتی اسکرول میکنیم از کد ها هستش رو میگم :)
https://free-learn.ir/beginner-user/

Thanks

طراحی_وب

javascript

html

css

ثبت پرسش جدید

Banana Life

@shift.delete 3 سال پیش مطرح شد

سلام
بله شما میتونید با z-index و fixed position همچین چیزی را طراحی کنید .

 <body>
    <div>
        <section class="top"></section>
        <section class="bottom"></section>
    </div>
    <div class="background"></div>
</body>

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.background {
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(./bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100%;
  z-index: -2;
}
 
.top {
  height: 100vh;
  width: 100%;
  background-color: rgb(26, 214, 83);
  z-index: 5;
}
.bottom {
  margin-top: 300px;
  height: 100vh;
  width: 100%;
  background-color: rgb(127, 44, 204);
  z-index: 5;
}

ارسال پاسخ

ناصر رحیمی

تخصص : اوسینت کار.

@MrNaser1365 2 سال پیش مطرح شد

https://www.mediafire.com/file/5csgtt94zfy8ya1/Rach.rar/file

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

برای این کار از Z-index و Fixed position استفاده کنم

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

	<body>
	<div>
	<section class="top"></section>
	<section class="bottom"></section>
	</div>
	<div class="background"></div>
	</body>

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	.background {
	position: fixed;
	top: 0;
	left: 0;
	background-image: url(./bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 100vh;
	width: 100%;
	z-index: -2;
	}

	.top {
	height: 100vh;
	width: 100%;
	background-color: rgb(26, 214, 83);
	z-index: 5;
	}
	.bottom {
	margin-top: 300px;
	height: 100vh;
	width: 100%;
	background-color: rgb(127, 44, 204);
	z-index: 5;
	}