تصویر ثابت

Question

تصویر ثابت

سوال

با سلام!

من دوست دارم در سایتم یک تصویری وجود داشته باشه که با اسکرول حرکت نکنه اما دوست دارم به جای عکس یک بک گراند باشه و از تگ لینک هم استفاده نشه و در همون صفحه سایت باشه

این هم کدی است که من پیدا کردم

document.write("<div id='fixeddiv' style='position:absolute;z-index:500;left:1px;top:1px;'><a target='_blank' href='1'><img src='؟' border=0></a></div>");fixedMenuId = 'fixeddiv';var fixedMenu = {hasInner: typeof(window.innerWidth) == 'number',hasElement: document.documentElement != null   && document.documentElement.clientWidth,menu: document.getElementById? document.getElementById(fixedMenuId): document.all  ? document.all[fixedMenuId]  : document.layers[fixedMenuId]};fixedMenu.computeShifts = function(){fixedMenu.shiftX = fixedMenu.hasInner? pageXOffset: fixedMenu.hasElement  ? document.documentElement.scrollLeft  : document.body.scrollLeft;if (fixedMenu.targetLeft > 0)fixedMenu.shiftX += fixedMenu.targetLeft;else{fixedMenu.shiftX += (fixedMenu.hasElement  ? document.documentElement.clientWidth  : fixedMenu.hasInner? window.innerWidth - 20: document.body.clientWidth)- fixedMenu.targetRight- fixedMenu.menu.offsetWidth;}fixedMenu.shiftY = fixedMenu.hasInner? pageYOffset: fixedMenu.hasElement  ? document.documentElement.scrollTop  : document.body.scrollTop;if (fixedMenu.targetTop > 0)fixedMenu.shiftY += fixedMenu.targetTop;else{fixedMenu.shiftY += (fixedMenu.hasElement? document.documentElement.clientHeight: fixedMenu.hasInner  ? window.innerHeight - 20  : document.body.clientHeight)- fixedMenu.targetBottom- fixedMenu.menu.offsetHeight;}};fixedMenu.moveMenu = function(){fixedMenu.computeShifts();if (fixedMenu.currentX != fixedMenu.shiftX|| fixedMenu.currentY != fixedMenu.shiftY){fixedMenu.currentX = fixedMenu.shiftX;fixedMenu.currentY = fixedMenu.shiftY;if (document.layers){fixedMenu.menu.left = fixedMenu.currentX;fixedMenu.menu.top = fixedMenu.currentY;}else{fixedMenu.menu.style.left = fixedMenu.currentX + 'px';fixedMenu.menu.style.top = fixedMenu.currentY + 'px';}}fixedMenu.menu.style.right = '';fixedMenu.menu.style.bottom = '';};fixedMenu.floatMenu = function(){fixedMenu.moveMenu();setTimeout('fixedMenu.floatMenu()', 20);};fixedMenu.addEvent = function(element, listener, handler){if(typeof element[listener] != 'function' ||typeof element[listener + '_num'] == 'undefined'){element[listener + '_num'] = 0;if (typeof element[listener] == 'function'){element[listener + 0] = element[listener];element[listener + '_num']++;}element[listener] = function(e){var r = true;e = (e) ? e : window.event;for(var i = 0; i < element[listener + '_num']; i++)if(element[listener + i](e) === false)r = false;return r;}}   for(var i = 0; i < element[listener + '_num']; i++)if(element[listener + i] == handler)return;element[listener + element[listener + '_num']] = handler;element[listener + '_num']++;};fixedMenu.supportsFixed = function(){var testDiv = document.createElement('div');testDiv.id = 'testingPositionFixed';testDiv.style.position = 'fixed';testDiv.style.top = '0px';testDiv.style.right = '0px';document.body.appendChild(testDiv);var offset = 1;if (typeof testDiv.offsetTop == 'number'&& testDiv.offsetTop != null && testDiv.offsetTop != 'undefined'){offset = parseInt(testDiv.offsetTop);}if (offset == 0){return true;}return false;};fixedMenu.init = function(){if (fixedMenu.supportsFixed())fixedMenu.menu.style.position = 'fixed';else{var ob = document.layers ? fixedMenu.menu : fixedMenu.menu.style;fixedMenu.targetLeft = parseInt(ob.left);fixedMenu.targetTop = parseInt(ob.top);fixedMenu.targetRight = parseInt(ob.right);fixedMenu.targetBottom = parseInt(ob.bottom);if (document.layers){menu.left = 0;menu.top = 0;}fixedMenu.addEvent(window, 'onscroll', fixedMenu.moveMenu);fixedMenu.floatMenu();}};fixedMenu.addEvent(window, 'onload', fixedMenu.init);

۱

در حال بررسی 0

HTML, طراحی سایت 4 سال ۱۳۹۹/۵/۱۳ ۱۰:۱۳:۴۵ ۱۳۹۹/۵/۱۳ ۱۰:۱۳:۴۵ 1 پاسخ ها کاربر تازه 0

درباره javadکاربر تازه

پاسخ ( 1 )

ارسال یک پاسخ

پرسش قبلی

پرسش بعدی

احمد آخوندی مدیر سایت · Answer 1 · ۱۳۹۹/۵/۱۵ ۲۰:۵۲:۲۵

سلام

یک نمونه کد براتون میزارم که تصویر ثابت هست:

<html>

<head>
	<title> www.beporsam.ir </title>
</head>
<style type="text/css">
/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 100%;
  font-family: "Roboto", sans-serif;
  color: #3d3536;
  background-color: white;
}

body, html {
  /* important */
  height: 100%;
}
a {
  color: #a6989a;
}
/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

.cd-main-content {
  /* you need to assign a min-height to the main content so that the children can inherit it*/
  height: 100%;
  position: relative;
  z-index: 1;
}

.cd-fixed-bg {
  position: relative;
  min-height: 75%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 1170px;
  text-align: center;
  font-size: 30px;
  font-size: 1.875rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: white;
}
.cd-fixed-bg.cd-bg-1 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg01.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg02.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg03.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg04.jpg");
}
@media only screen and (min-width: 320px) {
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 36px;
  }
}
@media only screen and (min-width: 480px) {
  .cd-fixed-bg {
    background-attachment: fixed;
  }
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 48px;
    font-weight: 300;
  }
}

.cd-scrolling-bg {
  position: relative;
  min-height: 50%;
  padding: 4em 0;
  line-height: 1.6;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.cd-scrolling-bg.cd-color-1 {
  background-color: #3d3536;
  color: #a6989a;
}
.cd-scrolling-bg.cd-color-2 {
  background-color: #3d3536;
  color: #a6989a;
}
.cd-scrolling-bg.cd-color-3 {
  background-color: #3d3536;
  color: #a6989a;
}
@media only screen and (min-width: 480px) {
  .cd-scrolling-bg {
    padding: 8em 0;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 2;
    font-weight: 300;
  }
}

</style>
<body>
	<main class="cd-main-content">
		<div class="cd-fixed-bg cd-bg-1">
			<h1>Alternating fixed/scrolling backgrounds Pure CSS</h1>
		</div> <!-- cd-fixed-bg -->

		<div class="cd-scrolling-bg cd-color-2">
			<div class="cd-container">
				<p>
					For this pen I included only the vanilla CSS and only that necessary  to demonstrate the effect but on the author's site at <a href="codyhouse.co/gem/alternate-fixed-scroll-backgrounds/">codyhouse.co</a>, the creators are using Sass which I think is nicer. But for the sake of simplicity for this example I took the easy way out. 
          </p>
          <p>
          As anyone who has tried knows, implementing sample code such as this into a site with a different architecture can be a little tricky but I did manage to weave it into a pre-existing project with a little work. I love the effect!
				</p>
			</div> <!-- cd-container -->
		</div> <!-- cd-scrolling-bg -->

		<div class="cd-fixed-bg cd-bg-2">
			<h2>www.beporsam.ir</h2>
		</div> <!-- cd-fixed-bg -->

		<div class="cd-scrolling-bg cd-color-3">
			<div class="cd-container">
			  <p>In the authors presentation of the code, the default setting for the height of both the fixed and scrolling backgrounds is 100%. That min height can be what ever you want. If you add more text, the container grows but will always fill the viewport to the degree that min-height is defined.</p>
        <p>I have chosen to reduce this value to something less than 100% because at 100%, upon initial page load, the user has no visual indication that there is anything below the fold. My settings for these values, contained in the classes .cd-fixed-bg and .cd-scrolling-bg are 75% and 50% respectively.</p>
        <p>I suppose you could ad ID's to the individual scrolling-bg's and have them at different sizes for different purposes but that's up to you.
				</p>
			</div> <!-- cd-container -->
		</div> <!-- cd-scrolling-bg -->

		<div class="cd-fixed-bg cd-bg-3">
			<h2>There I go again, leaning it over.</h2>
		</div> <!-- cd-fixed-bg -->

		<div class="cd-scrolling-bg cd-color-1">
			<div class="cd-container">
				<p>
					Originally I tried implementing just the code snippets they show on the site but that totally did not work. Finally I downloaded the source and realized that there was so much more to it than just the bit they showed on the blog page. So we continue to learn.
				</p>
			</div> <!-- cd-container -->
		</div> <!-- cd-scrolling-bg -->

		<div class="cd-fixed-bg cd-bg-4">
			<h2>Last shot is a knee dragger!</h2>
		</div> <!-- cd-fixed-bg -->
	</main> <!-- cd-main-content -->
</body>

</html>

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

۶۲

۶۳

۶۴

۶۵

۶۶

۶۷

۶۸

۶۹

۷۰

۷۱

۷۲

۷۳

۷۴

۷۵

۷۶

۷۷

۷۸

۷۹

۸۰

۸۱

۸۲

۸۳

۸۴

۸۵

۸۶

۸۷

۸۸

۸۹

۹۰

۹۱

۹۲

۹۳

۹۴

۹۵

۹۶

۹۷

۹۸

۹۹

۱۰۰

۱۰۱

۱۰۲

۱۰۳

۱۰۴

۱۰۵

۱۰۶

۱۰۷

۱۰۸

۱۰۹

۱۱۰

۱۱۱

۱۱۲

۱۱۳

۱۱۴

۱۱۵

۱۱۶

۱۱۷

۱۱۸

۱۱۹

۱۲۰

۱۲۱

۱۲۲

۱۲۳

۱۲۴

۱۲۵

۱۲۶

۱۲۷

۱۲۸

۱۲۹

۱۳۰

۱۳۱

۱۳۲

۱۳۳

۱۳۴

۱۳۵

۱۳۶

۱۳۷

۱۳۸

۱۳۹

۱۴۰

۱۴۱

۱۴۲

۱۴۳

۱۴۴

۱۴۵

۱۴۶

۱۴۷

۱۴۸

۱۴۹

۱۵۰

۱۵۱

۱۵۲

۱۵۳

۱۵۴

۱۵۵

۱۵۶

۱۵۷

۱۵۸

۱۵۹

۱۶۰

۱۶۱

۱۶۲

۱۶۳

۱۶۴

۱۶۵

۱۶۶

۱۶۷

۱۶۸

۱۶۹

۱۷۰

۱۷۱

۱۷۲

۱۷۳

۱۷۴

۱۷۵

۱۷۶

۱۷۷

۱۷۸

۱۷۹

۱۸۰

۱۸۱

۱۸۲

۱۸۳

۱۸۴

۱۸۵

۱۸۶

۱۸۷

۱۸۸

۱۸۹

۱۹۰

۱۹۱

۱۹۲

۱۹۳

۱۹۴

۱۹۵

<html>

<head>

<title> www.beporsam.ir </title>

</head>

/* --------------------------------

Primary style

-------------------------------- */

html * {

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

*, *:after, *:before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

font-size: ۱۰۰%;

font-family: "Roboto", sans-serif;

color: #۳d3536;

background-color: white;

}

body, html {

/* important */

height: ۱۰۰%;

}

a {

color: #a6989a;

}

/* --------------------------------

Modules - reusable parts of our design

-------------------------------- */

.cd-container {

/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */

width: ۹۰%;

max-width: ۷۶۸px;

margin: ۰ auto;

}

.cd-container::after {

/* clearfix */

content: '';

display: table;

clear: both;

}

.cd-main-content {

/* you need to assign a min-height to the main content so that the children can inherit it*/

height: ۱۰۰%;

position: relative;

z-index: ۱;

}

.cd-fixed-bg {

position: relative;

min-height: ۷۵%;

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

z-index: ۱;

}

.cd-fixed-bg h1, .cd-fixed-bg h2 {

position: absolute;

left: ۵۰%;

top: ۵۰%;

bottom: auto;

right: auto;

-webkit-transform: translateX(-۵۰%) translateY(-۵۰%);

-moz-transform: translateX(-۵۰%) translateY(-۵۰%);

-ms-transform: translateX(-۵۰%) translateY(-۵۰%);

-o-transform: translateX(-۵۰%) translateY(-۵۰%);

transform: translateX(-۵۰%) translateY(-۵۰%);

width: ۹۰%;

max-width: ۱۱۷۰px;

text-align: center;

font-size: ۳۰px;

font-size: ۱.۸۷۵rem;

text-shadow: ۰ ۱px ۳px rgba(۰, ۰, ۰, ۰.۳);

color: white;

}

.cd-fixed-bg.cd-bg-1 {

background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg01.jpg");

}

.cd-fixed-bg.cd-bg-2 {

background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg02.jpg");

}

.cd-fixed-bg.cd-bg-3 {

background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg03.jpg");

}

.cd-fixed-bg.cd-bg-4 {

background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg04.jpg");

}

@media only screen and (min-width: 320px) {

.cd-fixed-bg h1, .cd-fixed-bg h2 {

font-size: ۳۶px;

}

@media only screen and (min-width: 480px) {

.cd-fixed-bg {

background-attachment: fixed;

}

.cd-fixed-bg h1, .cd-fixed-bg h2 {

font-size: ۴۸px;

font-weight: ۳۰۰;

}

.cd-scrolling-bg {

position: relative;

min-height: ۵۰%;

padding: ۴em ۰;

line-height: ۱.۶;

box-shadow: ۰ ۰ ۵۰px rgba(۰, ۰, ۰, ۰.۵);

z-index: ۲;

}

.cd-scrolling-bg.cd-color-1 {

background-color: #۳d3536;

color: #a6989a;

}

.cd-scrolling-bg.cd-color-2 {

background-color: #۳d3536;

color: #a6989a;

}

.cd-scrolling-bg.cd-color-3 {

background-color: #۳d3536;

color: #a6989a;

}

@media only screen and (min-width: 480px) {

.cd-scrolling-bg {

padding: ۸em ۰;

font-size: ۲۰px;

font-size: ۱.۲۵rem;

line-height: ۲;

font-weight: ۳۰۰;

}

</style>

<body>

<h1>Alternating fixed/scrolling backgrounds Pure CSS</h1>

</div>

<p>

For this pen I included only the vanilla CSS and only that necessary to demonstrate the effect but on the author's site at <a href="codyhouse.co/gem/alternate-fixed-scroll-backgrounds/">codyhouse.co</a>, the creators are using Sass which I think is nicer. But for the sake of simplicity for this example I took the easy way out.

</p>

<p>

As anyone who has tried knows, implementing sample code such as this into a site with a different architecture can be a little tricky but I did manage to weave it into a pre-existing project with a little work. I love the effect!

</p>

</div>

</div>

<h2>www.beporsam.ir</h2>

</div>

<p>In the authors presentation of the code, the default setting for the height of both the fixed and scrolling backgrounds is 100%. That min height can be what ever you want. If you add more text, the container grows but will always fill the viewport to the degree that min-height is defined.</p>

<p>I have chosen to reduce this value to something less than 100% because at 100%, upon initial page load, the user has no visual indication that there is anything below the fold. My settings for these values, contained in the classes .cd-fixed-bg and .cd-scrolling-bg are 75% and 50% respectively.</p>

<p>I suppose you could ad ID's to the individual scrolling-bg's and have them at different sizes for different purposes but that's up to you.

</p>

</div>

</div>

<h2>There I go again, leaning it over.</h2>

</div>

<p>

Originally I tried implementing just the code snippets they show on the site but that totally did not work. Finally I downloaded the source and realized that there was so much more to it than just the bit they showed on the blog page. So we continue to learn.

</p>

</div>

</div>

<h2>Last shot is a knee dragger!</h2>

</div>

</main>

</body>

</html>

و در کل برای ثابت نگه داشتن بک گراند از ویژگی CSS زیر استفاده میشود:

body {
  background-image: url("beporsam.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

۱

۲

۳

۴

۵

body {

background-image: url("beporsam.png");

background-repeat: no-repeat;

background-attachment: fixed;

}

موفق باشید.

عضویت در سایت

ورود

فراموشی رمز عبور

ورود

عضویت در سایت

تصویر ثابت

تصویر ثابت

درباره javadکاربر تازه

پرسش های مشابه

فرم لاگین

مشکل در کد php

وردپرس

غیر فعال کردن فید ها در سایت

حذف شدن منو سایت

پاسخ ( 1 )

ارسال یک پاسخ

سامانه آموزشی و خدماتی بپرسم

اولین وب سایت آموزشی و پرسش و پاسخ در ایران