tana yorlig'i fon rasmining shaffofligini qanday o'zgartirish mumkin

Men shunga o'xshash bir qancha mavjud bo'lgan savollarni topdim, lekin ular men izlayotgan narsalar emas.

What I am trying to do is to change the <body> tag opacity from 0 to 1 using transition when the page gets loaded in XXX.php file. My code works fine, except the background image does not seem to be affected by transition.

Qanday qilib men bunga erishishga harakat qilyapman sizni qo'pol fikrlash uchun ba'zi bir namuna kodi.

HTML:

<html>
  <body style="background='url(..LINK..) rgb(0, 0, 0) 0% 0% no-repeat'">
  </body>
</html>

CSS:

body {
  opacity: 0;
  transition: opacity 3s; /*will skip webkit, etc here*/
}

JS:

jQuery(window).load(function(){
  jQuery('body').css('opacity', 1);
}

Barcha kontent to'g'ri ishlaydi va kutilganidek, 0 dan 1 gacha choyshabni oladi, ammo fon-rasm darhol yuklanadi. Men shaffoflikni 0 dan 1 gacha o'zgartirish uchun 3 soniyani olaman.

I have tried to apply CSS and JS to <html> tag, but it still makes the same effect.

Bundan tashqari, bu XXX.html faylini o'zgartira olmayman, yoki background: url ("...") " ga kirishga ruxsat yo'q, shuning uchun manipulyatsiya qilolmaysiz JS bilan ta'siri.

Uni qanday hal qilish bo'yicha qanday takliflar mavjud?

EDIT I want the initial <body> opacity to be 0. And when all the content loads, start changing opacity from 0 to 1 in i.e. 3 seconds

1
sahifadagi yuklamani 0 dan 1 ga yuklab olishni xohlaysizmi?
qo'shib qo'ydi muallif PhpDude, manba
@PhpDude ha, shaffoflikni istayman: 0. va barcha kontentni yuklaganida, 3 soniyada 0 dan 1gacha o'zgaruvchanlik boshlanadi
qo'shib qo'ydi muallif Marius, manba
@PhpDude ha, shaffoflikni istayman: 0. va barcha kontentni yuklaganida, 3 soniyada 0 dan 1gacha o'zgaruvchanlik boshlanadi
qo'shib qo'ydi muallif Marius, manba

8 javoblar

Qanday qilib siz buni amalga oshirishingiz mumkin, bu erda background-size (satr 0) ni belgilab qo'yasiz va uning orqa fon rasmini egallagan so'zni yaratasiz

Agar jQuery animatsiyasini tekkizishda davom etmoqchi bo`lsangiz, mening javobimda oxirgi 2: nd namunasini qo'shganman.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

html, body {
  margin: 0;
  height: 100%;
}
body {
  position: relative;
  background-size: 0 !important;
  opacity: 0;
}
body::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-image: inherit;
  background-size: cover;
}
body,
body::before {
  animation: slides 2.5s linear 0.5s forwards;   /*  0.5s delay, 2.5s duration  */
}

@keyframes slides {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body > div {
  position: relative;  /*  needed on all direct children  */
  background: white;
  font-size: 20px;
  margin: 0 20px;
  padding: 20px;
}
<body style='background-image: url("http://placehold.it/400x200/f00/fff?text=sample image");'>

  <div>
    Your content
  </div>

</body>
</div> </div>

Namuna 2

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$( document ).ready(function() {

  $('body').addClass('showme');

});
html, body {
  margin: 0;
  height: 100%;
}
body {
  position: relative;
  background-size: 0 !important;
  opacity: 0;
}
body::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-image: inherit;
  background-size: cover;
}

body.showme,
body.showme::before {
  animation: showme 3s linear forwards;
}

@keyframes showme {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body > div {
  position: relative;  /*  needed on all direct children  */
  background: white;
  font-size: 20px;
  margin: 0 20px;
  padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body style='background-image: url("http://placehold.it/400x200/f00/fff?text=sample image");'>

  <div>
    Your content
  </div>

</body>
</div> </div>
1
qo'shib qo'ydi

Qanday qilib siz buni amalga oshirishingiz mumkin, bu erda background-size (satr 0) ni belgilab qo'yasiz va uning orqa fon rasmini egallagan so'zni yaratasiz

Agar jQuery animatsiyasini tekkizishda davom etmoqchi bo`lsangiz, mening javobimda oxirgi 2: nd namunasini qo'shganman.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

html, body {
  margin: 0;
  height: 100%;
}
body {
  position: relative;
  background-size: 0 !important;
  opacity: 0;
}
body::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-image: inherit;
  background-size: cover;
}
body,
body::before {
  animation: slides 2.5s linear 0.5s forwards;   /*  0.5s delay, 2.5s duration  */
}

@keyframes slides {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body > div {
  position: relative;  /*  needed on all direct children  */
  background: white;
  font-size: 20px;
  margin: 0 20px;
  padding: 20px;
}
<body style='background-image: url("http://placehold.it/400x200/f00/fff?text=sample image");'>

  <div>
    Your content
  </div>

</body>
</div> </div>

Namuna 2

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$( document ).ready(function() {

  $('body').addClass('showme');

});
html, body {
  margin: 0;
  height: 100%;
}
body {
  position: relative;
  background-size: 0 !important;
  opacity: 0;
}
body::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-image: inherit;
  background-size: cover;
}

body.showme,
body.showme::before {
  animation: showme 3s linear forwards;
}

@keyframes showme {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body > div {
  position: relative;  /*  needed on all direct children  */
  background: white;
  font-size: 20px;
  margin: 0 20px;
  padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body style='background-image: url("http://placehold.it/400x200/f00/fff?text=sample image");'>

  <div>
    Your content
  </div>

</body>
</div> </div>
1
qo'shib qo'ydi

Using body:before a "mask" can be added which can then be faded out when the document is ready jQuery shorthand for doc ready is $(function() {...}) or adding JavaScript just before has the same effect. The CSS can handle the transitioning via use of classes. The JavaScript then handles adding/removing the classes to invoke the CSS transition. The only part which has slight disconnect is when the transition is complete the mask needs to be removed or pushed back so that it no longer blocks the this can be done with a timeout that matches the transition time. See the jsfiddle here https://jsfiddle.net/6p3ovena/

(function($) {
  var body = $("body");
  $(function() {
    body.removeClass("before-load");
    setTimeout(function() {
      body.addClass("after-transition");
    }, 3000);
  });
})(jQuery);
1
qo'shib qo'ydi

Using body:before a "mask" can be added which can then be faded out when the document is ready jQuery shorthand for doc ready is $(function() {...}) or adding JavaScript just before has the same effect. The CSS can handle the transitioning via use of classes. The JavaScript then handles adding/removing the classes to invoke the CSS transition. The only part which has slight disconnect is when the transition is complete the mask needs to be removed or pushed back so that it no longer blocks the this can be done with a timeout that matches the transition time. See the jsfiddle here https://jsfiddle.net/6p3ovena/

(function($) {
  var body = $("body");
  $(function() {
    body.removeClass("before-load");
    setTimeout(function() {
      body.addClass("after-transition");
    }, 3000);
  });
})(jQuery);
1
qo'shib qo'ydi

Buni sinab ko'ring

jQuery('body').css('opacity',0);
    setTimeout(function(){
          jQuery('body').css('opacity', 1);
    },3000)
0
qo'shib qo'ydi
jQuery ("body") Javobni tuzish CSS ('opacity', 0); vaqt o'tishi bilan
qo'shib qo'ydi muallif Klevis Cipi, manba
Ushbu holat <body> fon tasvirini ko'rinmas holga keltirmaydi
qo'shib qo'ydi muallif Marius, manba
asl muammo bo'yicha, shaffoflik: 0 hali fon-tasvirni oshkora qilmaydi
qo'shib qo'ydi muallif Marius, manba

Buni sinab ko'ring

jQuery('body').css('opacity',0);
    setTimeout(function(){
          jQuery('body').css('opacity', 1);
    },3000)
0
qo'shib qo'ydi
jQuery ("body") Javobni tuzish CSS ('opacity', 0); vaqt o'tishi bilan
qo'shib qo'ydi muallif Klevis Cipi, manba
Ushbu holat <body> fon tasvirini ko'rinmas holga keltirmaydi
qo'shib qo'ydi muallif Marius, manba
asl muammo bo'yicha, shaffoflik: 0 hali fon-tasvirni oshkora qilmaydi
qo'shib qo'ydi muallif Marius, manba

keyin CSS bilan sinashingiz mumkin: keyin.

Iltimos, https://fiddle.jshell.net/ps5v8efc/ ga qarang.

Menga habar berarsiz.

0
qo'shib qo'ydi
Taklif etilgan echim uchun tashakkur, lekin men uni ishlata olmayman. Fon tasvirining URL-manziliga kirishim yo'q va nima uchun men yarata olmayapman: CSS qoidasidan keyin
qo'shib qo'ydi muallif Marius, manba

keyin CSS bilan sinashingiz mumkin: keyin.

Iltimos, https://fiddle.jshell.net/ps5v8efc/ ga qarang.

Menga habar berarsiz.

0
qo'shib qo'ydi
Taklif etilgan echim uchun tashakkur, lekin men uni ishlata olmayman. Fon tasvirining URL-manziliga kirishim yo'q va nima uchun men yarata olmayapman: CSS qoidasidan keyin
qo'shib qo'ydi muallif Marius, manba