CSS3 ব্যাকগ্রাউন্ড ইমেজ ট্রানজিশন

Question

আমি সিএসএস রূপান্তরটি ব্যবহার করে "ফেইড-ইন ফেইড-আউট" প্রভাব তৈরি করার চেষ্টা করছি। তবে আমি এটি পটভূমির চিত্রের সাথে কাজ করতে পারি না ...

সিএসএস:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}​

একবার দেখুন: http://jsfiddle.net/AK3La/

Answer 1

আপনি স্থানান্তর করতে পারেন background-image। imgউপাদানটিতে নীচে সিএসএস ব্যবহার করুন :

-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;

এটি ক্রোম, অপেরা এবং সাফারি দ্বারা স্থানীয়ভাবে সমর্থিত। ফায়ারফক্স এটি এখনও কার্যকর করেনি ( বুগজিল.লা )। আইই সম্পর্কে নিশ্চিত নয়।

Comments

background-imageকোনও অ্যানিমেটেবল সম্পত্তি নয় ( w3.org/TR/css3-transitions/#animatable-properties ), সুতরাং আপনার সমাধান মান অনুসারে নয়।

— TLindig

এটি কোনও সমাধান নয় - এফএফ এবং আইই এটি সমর্থন করে না, এবং উপরে উল্লিখিত হিসাবে এটি কোনও সম্পত্তি নয় যা অনুমিতিদের সমর্থন করা উচিত says

— সেন্টিনেল

এফএক্স-এর বর্তমান বিকাশের জন্য আরও দেখুন: bugzilla.mozilla.org/show_bug.cgi?id=546052

— ভোলকার ই।

@TLindig এটি একটি অ্যানিম্যাটযোগ্য সম্পত্তি হওয়া উচিত।

অ্যানিমেটেবল সম্পত্তি হ'ল backgroundএবং এটিই ব্যবহার করা উচিত (এটি আমার জন্য ক্রোমে কাজ করে)। প্রশ্ন পোস্ট হওয়ার পর থেকে সম্ভবত (বা ইমপ্ল) পরিবর্তন হয়েছে

— fps

Answer 2

সমাধান (যা আমি নিজেই পেয়েছি) একটি নিনজা ট্রিক, আমি আপনাকে দুটি উপায় দিতে পারি:

প্রথমে আপনাকে এর জন্য একটি "ধারক" তৈরি করা দরকার <img>, এতে একইসাথে সাধারণ এবং হোভার স্টেটস থাকবে:

<div class="images-container">
    <img src="http://lorempixel.com/400/200/animals/9/">
    <img src="http://lorempixel.com/400/200/animals/10/">
</div>

• সঙ্গে সিএসএস 3 নির্বাচকরা http://jsfiddle.net/eD2zL/1/ (যদি আপনি এই এক ব্যবহার করেন, "স্বাভাবিক" রাষ্ট্র প্রথম সন্তান আপনার ধারক, হতে পারে অথবা পরিবর্তন করতে হবে nth-child()অর্ডার)

• CSS2 সমাধান http://jsfiddle.net/eD2zL/2/ (এর মধ্যে পার্থক্য কেবলমাত্র কয়েকটি নির্বাচক)

মূলত, আপনি "স্বাভাবিক" রাষ্ট্রটি লুকিয়ে রাখতে হবে এবং যখন আপনি এটি হোভার করেন তখন তাদের "হোভার" দেখানো দরকার

এবং এটিই, আমি আশা করি যে কেউ এটির কাজে লাগবে।

Comments

সুন্দর সমাধান। প্রথম নমুনা নিয়ে পরীক্ষা করার সময়, আমি লক্ষ করেছি যে আপনি যদি রূপান্তরের সময়কাল 4s তে বাড়িয়ে দেন তবে জেড-সূচকটি স্থানান্তরের মাঝখানে স্যুইচ করলে আপনি খুব লক্ষণীয় লাফ দেখতে পারবেন। কমপক্ষে ক্রোম 35-এ, আপনি জেড-ইনডেক্স স্যুইচের সময় পরিবর্তন করতে পারেন এবং সম্পত্তি মানটিকে "সমস্ত 4s স্বাচ্ছন্দ্য, জেড-ইনডেক্স 1 এমএস " ( jsfiddle.net/eD2zL/330 ) এ পরিবর্তন করে রূপান্তরটি পরিষ্কার করতে পারেন ।

— নিল স্ট্যুবলেন

@NealS। তুমি ঠিক বলছো. এই উত্তরটি 2 বছর পুরানো হলেও আমি জেড-ইনডেক্সটি সরিয়ে ফেলব, এটি অপ্রয়োজনীয় বলে মনে হচ্ছে। চিত্রগুলি কেবল ক্রমযুক্ত হওয়া দরকার।

— রাফো

অনেক ধন্যবাদ. আপনার সমাধানটি আমার পক্ষে খুব সহায়ক।

— স্ল্যাম

আমি যদি এই সমাধানটি ব্যবহার করি তবে কী "অলস লোডিং" সম্ভব?

— ড্যানিয়েল

Answer 3

আমি আমার জন্য কাজ করে এমন একটি সমাধান বের করেছি ...

আপনার যদি কেবলমাত্র লিঙ্কটি অন্তর্ভুক্ত করে একটি তালিকা আইটেম (বা ডিভি) থাকে এবং আসুন আমরা এটি বলতে পারি যে এটি আপনার পৃষ্ঠায় সামাজিক লিঙ্কগুলির জন্য ফেসবুক, টুইটার, ect। এবং আপনি একটি স্প্রাইট চিত্র ব্যবহার করছেন আপনি এটি করতে পারেন:

<li id="facebook"><a href="facebook.com"></a></li>

"লি" ব্যাকগ্রাউন্ডটিকে আপনার বোতামের চিত্রটি তৈরি করুন

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}

তারপরে লিঙ্কটির পটভূমি চিত্রটি বোতামের হোভার স্টেট করুন। এছাড়াও এটিতে অস্বচ্ছ বৈশিষ্ট্য যুক্ত করুন এবং এটি 0 তে সেট করুন।

#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
}

এখন আপনার কেবলমাত্র "এ: হোভার" এর অধীনে "অস্বচ্ছতা" দরকার এবং এটি 1 এ সেট করুন।

#facebook a:hover {
   opacity:1;
}

প্রতিটি ব্রাউজারের জন্য "এ" এবং "এ: হোভার" তে অস্বচ্ছ স্থানান্তর বৈশিষ্ট্য যুক্ত করুন যাতে চূড়ান্ত সিএসএস এর মতো দেখতে পাবেন:

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}
#facebook a:hover {
   opacity:1;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

যদি আমি এটি সঠিকভাবে ব্যাখ্যা করি যা আপনার একটি বিবর্ণ পটভূমি চিত্রের বোতামটি রাখে, আশা করি এটি কমপক্ষে সহায়তা করবে!

Comments

আমি এর একটি ভিডিও টিউটোরিয়াল সংস্করণও তৈরি করেছিলাম। youtube.com/watch?v=6ieR5ApVpr0

— অস্টিন প্যারিশ থমাস

আপনার, এএফএআইকে, হোভার সিউডোক্লাসে স্থানান্তরগুলি নির্দিষ্ট করার দরকার নেই; অ্যাঙ্কর ট্যাগ প্রকারের জন্য রূপান্তর সংজ্ঞাটি হোভার আচরণকে এগিয়ে নিয়ে যাবে, আপনাকে যে পরিবর্তন করতে হবে তা হল অস্বচ্ছতা। মনে রাখবেন যে এই উদাহরণটি ভাল কাজ করে কারণ শৈলীগুলি সরাসরি আইডি / ট্যাগ ধরণের ক্ষেত্রে প্রয়োগ করা হয়; আপনি যদি ক্লাসগুলির সাথে এটি করেন তবে আপনাকে নিশ্চিত করতে হবে যে আপনি সংক্রমণের সংজ্ঞায়িত করে ক্লাস যোগ করছেন এবং মুছে ফেলছেন না।

— কিথস

Answer 4

দুর্ভাগ্যক্রমে আপনি ট্রানজিশনটি ব্যবহার করতে পারবেন না , ডাব্লু 3 গ অ্যানিমেটেবল বৈশিষ্ট্যগুলির তালিকাbackground-image দেখুন ।

আপনি কিছু কৌশল করতে চাইবেন background-position।

Answer 5

আপনি সিডো উপাদানটি আপনার পছন্দসই প্রভাবটি পেতে ব্যবহার করতে পারেন যেমন আমি F ফ্রিডলে করেছি ।

সিএসএস:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    position: relative;
}
.title a:after {
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    content: "";
    opacity: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    /* TRANSISITION */
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{   
    opacity: 1;
}

এইচটিএমএল:

<div class="title">
    <a href="#">HYPERLINK</a>
</div>

Comments

এটি দুর্দান্ত কাজ করে তবে আপনি 2 টি সমস্যায় পড়তে পারেন: 1) আপনি যদি :afterউপাদানটি না দেখেন তবে সেটিং চেষ্টা করুন widthএবং heightতার 100%পরিবর্তে inherit2) যদি background-imageসত্যিকার অর্থে অগ্রভাগে প্রদর্শিত হয় , :afterউপাদানটির জন্য নেতিবাচক সূচীটি ব্যবহার করুন :z-index: -1;

— রাডেক পেচ

Answer 6

আপনি jQuery ব্যবহার করতে পারেন, আপনি প্রভাব সঙ্গে পটভূমি-ইমেজ স্যুইচ করতে BgSwitcher প্লাগইন চেষ্টা করতে পারেন , এটি ব্যবহার করা খুব সহজ।

উদাহরণ স্বরূপ :

$('.bgSwitch').bgswitcher({
        images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
        effect: "fade",
        interval: 10000
});

এবং আপনার নিজের প্রভাব যুক্ত করুন, প্রভাবের প্রকারগুলি যুক্ত দেখুন

Comments

ধন্যবাদ, আমি এই প্লাগইনটির ব্যবহারের সাথে টেবিলের পটভূমির পরিবর্তনটি অ্যানিমেট করে সমস্যাটি সমাধান করেছি।

— ইউজারলন্ড

Answer 7

এটি ব্যবহার করে, ব্যাকগ্রাউন্ডটি অ্যানিমেটেড ওয়েবে কাজ করবে তবে হাইব্রিড মোবাইল অ্যাপ কাজ করবে না

@-webkit-keyframes breath {
 0%   {  background-size: 110% auto; }
 50%  {  background-size: 140% auto; }
 100% {  background-size: 110% auto; }      
}
body {
   -webkit-animation: breath 15s linear infinite;
   background-image: url(images/login.png);
    background-size: cover;
}

Answer 8

ব্যাকগ্রাউন্ড-চিত্রগুলি অ্যানিমেটেড করা যায় না, আমি সামান্য এসসিএসএস মিক্সিন তৈরি করেছি যাতে আগে এবং পরে সিউডো সিলেক্টর ব্যবহার করে 2 টি পৃথক ব্যাকগ্রাউন্ড-চিত্রের মধ্যে রূপান্তর করতে দেওয়া হয় । এগুলি বিভিন্ন জেড-ইনডেক্স স্তরগুলিতে রয়েছে। যেটি এগিয়ে রয়েছে তা অস্বচ্ছতা 0 দিয়ে শুরু হয় এবং হোভারের সাথে দৃশ্যমান হয়।

আপনি লিনিয়ার-গ্রেডিয়েন্টগুলির সাথে অ্যানিমেশনগুলি তৈরি করতে একই পন্থাটি ব্যবহার করতে পারেন।

SCSS

@mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){  
  position: relative;  
  z-index: 100; 
  &:before, &:after {
    background-size: cover;  
    content: '';    
    display: block;
    height: 100%;
    position: absolute;
    top: 0; left: 0;    
    width: 100%;    
    transition: opacity $transTime;
  }
  &:before {    
    z-index: -101;
    background-image: url("#{$bkg1}");    
  }
  &:after {    
    z-index: -100;
    opacity: 0;
    background-image: url("#{$bkg2}");    
  }
  &:hover {
     &:after{
       opacity: 1; 
     }
  }  
}

এখন আপনি কেবল এটি দিয়ে ব্যবহার করতে পারেন

@include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");

আপনি এটি এখানে পরীক্ষা করে দেখতে পারেন: https://jsfiddle.net/pablosgpacheco/01rmg0qL/

Comments

খুব সুন্দর সমাধান! উপাদানটি কীভাবে ভালোভাবে ব্যবহার করতে হয় সে সম্পর্কে আমাকে আরও ভালো বোঝার সুযোগ দিয়েছিল: ': আগে' এবং ': পরে' বোনাস হিসাবে :-)

— জোরোনিমো

Answer 9

যদি অ্যানিমেটিং opacityকোনও বিকল্প না হয় তবে আপনি অ্যানিমেটও করতে পারেন background-size।

উদাহরণস্বরূপ, আমি এই সিএসএসটি backgound-imageবিলম্ব সহ একটি সেট করতে ব্যবহার করেছি ।

.before {
  background-size: 0;
}

.after {
  transition: background 0.1s step-end;
  background-image: $path-to-image;
  background-size: 20px 20px;
}

Comments

আপনার কাছ থেকে একটি ফেইড আউট প্রভাব চান .afterমধ্যে .beforeপটভূমি চিত্র, আপনি মধ্যে পটভূমি চিত্র সেট করতে হবে .before। অন্যথায় এটি অ্যানিমেশন ছাড়াই অদৃশ্য হয়ে যাবে।

— রাদেক পেচ

Answer 10

সালাম, এই উত্তরটি কেবল ক্রোমে কাজ করে, কারণ আইআই এবং এফএফ সমর্থন রঙ রূপান্তর।

আপনার এইচটিএমএল উপাদানগুলি তৈরি করার দরকার নেই opacity:0, কারণ এতে পাঠ্য রয়েছে এমন কিছু সময় এবং আপনার উপাদানগুলিকে দ্বিগুণ করার দরকার নেই!

জিসফিলের উদাহরণের লিঙ্কযুক্ত প্রশ্নটির জন্য একটি ছোট পরিবর্তন দরকার ছিল, এটি হ'ল খালি চিত্রটি যেমন .title aরাখবেন ঠিক তেমনভাবে খালি চিত্র তৈরি করুন, এবং কোডটি কাজ করবে।background:url(link to an empty image);.title a:hover

.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
  }
  .title a:hover{   background: transparent;
   background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}

এটি দেখুন https://jsfiddle.net/Tobasi/vv8q9hum/

Comments

তবুও ফায়ার শিয়াল বা আইই তে কাজ করছেন না :( তবে ক্রোমে ভাল দেখাচ্ছে

— মোহাম্মদ সুলেমান

Answer 11

ক্রিসের অনুপ্রেরণামূলক পোস্টের সাথে এখানে:

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

আমি এটি নিয়ে আসতে পেরেছি:

#banner
{
    display:block;
    width:100%;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-image:url(../images/image1.jpg);
    /* HOVER OFF */
    @include transition(background-image 0.5s ease-in-out); 

    &:hover
    {
        background-image:url(../images/image2.jpg);
        /* HOVER ON */
        @include transition(background-image 0.5s ease-in-out); 
    }
}

Answer 12

এই উত্তরটির উদাহরণ হিসাবে উদাহরণস্বরূপ সিউডো-উপাদান ব্যবহার করে গৃহীত উত্তরের চেয়ে বৃহত্তর ক্রস ব্রাউজার সমর্থন অর্জন করা যেতে পারে: https://stackoverflow.com/a/19818268/2602816

Answer 13

আমি এটির জন্য কিছুটা লড়াই করছি, আমি প্রথমে একে অপরের শীর্ষে এবং প্রতিটি তিন সেকেন্ডে চিত্রের একটি স্ট্যাক ব্যবহার করেছি, আমি স্ট্যাকের পরবর্তী চিত্রটি সঞ্চারিত করার চেষ্টা করছিলাম এবং বর্তমান চিত্রটি স্ট্যাকের নীচে ফেলে দিচ্ছি। একই সাথে আমি উপরে বর্ণিত অ্যানিমেশনগুলি ব্যবহার করছিলাম। আমার জীবনের জন্য এটি কাজ করতে পারি না।

আপনি এই লাইব্রেরিটি ব্যবহার করতে পারেন যা ** গতিশীল-পুনরায় আকার দেওয়া, স্লাইডশো-সক্ষম ব্যাকগ্রাউন্ড চিত্র ** jquery-backstretch ব্যবহার করে।

https://github.com/jquery-backstretch/jquery-backstretch