تغییرات در فایل html بکگراند تصویر - هفت خط کد انجمن پرسش و پاسخ برنامه نویسی

تغییرات در فایل html بکگراند تصویر

0 امتیاز

سلام
وقت بخیر
یه کد از html دارم که بکگراند قرار میده در وبسایت و بخوبی کار می کنه...
حالا اگر بخوام بهش بگم این تعداد فایل در این فولدر رو با هر بار ریلود پیج، در بکگراند قرار بده چه چیزی رو باید اضافه کنم بهش...
این کد HTML :

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
   
    <title>Full Page Background Image | Progressive</title>
   
    <style>
        * { margin: 0; padding: 0; }
       
        html {
            background: url(images/back.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
       
        #page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
        p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
    </style>
</head>
این هم کد CSS:

html {
  background: url(images/back.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
 
تشکر
سوال شده اسفند 29, 1397  بوسیله ی segments (امتیاز 12)   1 2

1 پاسخ

+1 امتیاز
 
بهترین پاسخ

سلام،

اگر بخواید بک گراند هاتون رندوم انتخاب بشن میتونید url شون رو تو یه لیست جاوا اسکریپت ذخیره کنید و با این کد در انتهای بخش اسکریپت تصویر زمینه رو تنظیم کنید (از jquery استفاده شده):

listOfUrls=["http://mysite.com/images/img0.png","http://mysite.com/images/img1.png",...];
randomNumber=Math.floor(Math.random()*listOfUrls.length);
$('body').css('background','url('+listOfUrls[randomNumber]+')');

اگر بخواید به شکل غیر تکراری(به ترتیب) انتخاب بشن باید از یک زبان سمت سرور مثل php یا node.js استفاده کرد که برای این کار راه های مختلفی هست. تو php برای مثال میشه از دستور scandir استفاده کرد تا عکس های موجود توی پوشه عکس هارو پیدا کرد (کارتون هم تمیز تر و دینامیک تر میشه) و بعد با استفاده از یک کوکی حساب اینکه کاربر آخرین بار کدوم تصویر رو دیده نگه داشت و با کمک echo تو قسمت css آدرس بعدی رو قرار داد.

موفق باشید 

 

پاسخ داده شده آذر 8, 1398 بوسیله ی عباس (امتیاز 280)   2 7
انتخاب شد دی 26, 1398 بوسیله ی مصطفی ساتکی
...