ฉันกำลังพยายามสร้างเอฟเฟกต์ "จางหายไป" โดยใช้การเปลี่ยน CSS แต่ฉันไม่สามารถใช้งานกับภาพพื้นหลังได้ ...

CSS:

.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/

background-imageคุณสามารถเปลี่ยน ใช้ CSS ด้านล่างในimgองค์ประกอบ:

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

สิ่งนี้รองรับโดย Chrome, Opera และ Safari Firefox ยังไม่ได้ใช้งาน ( bugzil.la ) ไม่แน่ใจเกี่ยวกับ IE

วิธีแก้ปัญหา (ที่ฉันค้นพบด้วยตัวเอง) เป็นเคล็ดลับของนินจาฉันสามารถเสนอคุณได้สองวิธี:

ก่อนอื่นคุณต้องสร้าง "คอนเทนเนอร์" สำหรับ<img>มันจะมีสถานะปกติและโฮเวอร์ในเวลาเดียวกัน:

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

• ด้วยตัวเลือกCSS3 http://jsfiddle.net/eD2zL/1/ (ถ้าคุณใช้อันนี้สถานะ "ปกติ" จะเป็นลำดับแรกคอนเทนเนอร์ของคุณหรือเปลี่ยนnth-child()ลำดับ)

• โซลูชันCSS2 http://jsfiddle.net/eD2zL/2/ (ความแตกต่างระหว่างเป็นเพียงตัวเลือกบางส่วน)

โดยทั่วไปคุณต้องซ่อนสถานะ "ปกติ" และแสดง "โฮเวอร์" เมื่อคุณวางเมาส์เหนือสถานะ

และนั่นก็คือฉันหวังว่าจะมีคนเห็นว่ามีประโยชน์

ฉันคิดหาวิธีแก้ปัญหาที่เหมาะกับฉันแล้ว ...

หากคุณมีรายการ (หรือ div) ที่มีเฉพาะลิงก์และสมมติว่านี่คือลิงก์โซเชียลบนเพจของคุณไปยัง facebook, twitter, ect และคุณกำลังใช้ภาพสไปรท์คุณสามารถทำได้:

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

ทำให้พื้นหลัง "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;
}

ตอนนี้สิ่งที่คุณต้องมีคือ "ความทึบ" ใต้ "a: hover" และตั้งค่านี้เป็น 1

#facebook a:hover {
   opacity:1;
}

เพิ่มแอตทริบิวต์การเปลี่ยนความทึบสำหรับแต่ละเบราว์เซอร์เป็น "a" และ "a: hover" ดังนั้น css สุดท้ายจะมีลักษณะดังนี้:

#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;
}

ถ้าฉันอธิบายถูกต้องว่าควรให้คุณมีปุ่มภาพพื้นหลังที่ซีดจางหวังว่ามันจะช่วยได้อย่างน้อย!

น่าเสียดายที่คุณไม่สามารถใช้การเปลี่ยนได้background-imageโปรดดูรายการคุณสมบัติที่เคลื่อนไหวได้ w3cเคลื่อนไหวได้

background-positionคุณอาจต้องการที่จะทำเทคนิคบางอย่างกับ

คุณสามารถใช้องค์ประกอบหลอกเพื่อให้ได้เอฟเฟกต์ที่คุณต้องการเหมือนที่ฉันทำในFiddleนั้น

CSS:

.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;
}

HTML:

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

หากคุณสามารถใช้ jQuery คุณสามารถลองใช้ปลั๊กอินBgSwitcherเพื่อสลับภาพพื้นหลังด้วยเอฟเฟกต์ได้ซึ่งใช้งานง่ายมาก

ตัวอย่างเช่น :

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

และเพิ่มเอฟเฟกต์ของคุณเองโปรดดูการเพิ่มประเภทเอฟเฟกต์

ลองทำเช่นนี้จะทำให้พื้นหลังเคลื่อนไหวได้บนเว็บ แต่แอปมือถือแบบไฮบริดไม่ทำงาน

@-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;
}

เมื่อพิจารณาว่าภาพพื้นหลังไม่สามารถเคลื่อนไหวได้ฉันได้สร้างมิกซ์อิน SCSS เล็กน้อยเพื่อให้สามารถเปลี่ยนภาพพื้นหลัง 2 ภาพโดยใช้ตัวเลือกหลอกก่อนและหลังหลังพวกมันอยู่ที่ชั้นดัชนี z ที่แตกต่างกัน สิ่งที่อยู่ข้างหน้าเริ่มต้นด้วยความทึบ 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/

หากการเคลื่อนไหวopacityไม่ใช่ตัวเลือกคุณสามารถทำให้เคลื่อนไหวbackground-sizeได้

ตัวอย่างเช่นฉันใช้ CSS นี้เพื่อตั้งค่าbackgound-imageการหน่วงเวลา

.before {
  background-size: 0;
}

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

Salam คำตอบนี้ใช้ได้เฉพาะใน Chrome ทำให้ IE และ FF รองรับการเปลี่ยนสี

ไม่จำเป็นต้องสร้างองค์ประกอบ HTML ของคุณopacity:0บางครั้งก็มีข้อความและไม่จำเป็นต้องเพิ่มองค์ประกอบของคุณเป็นสองเท่า!

คำถามที่มีลิงก์ไปยังตัวอย่างใน jsfiddle จำเป็นต้องมีการเปลี่ยนแปลงเล็กน้อยนั่นคือการใส่รูปภาพเปล่าให้.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/

ด้วยโพสต์สร้างแรงบันดาลใจของ Chris ที่นี่:

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); 
    }
}

สิ่งนี้สามารถทำได้ด้วยการรองรับข้ามเบราว์เซอร์ที่มากกว่าคำตอบที่ยอมรับโดยใช้องค์ประกอบหลอกตามตัวอย่างของคำตอบนี้: https://stackoverflow.com/a/19818268/2602816

ฉันกำลังดิ้นรนกับเรื่องนี้เล็กน้อยก่อนอื่นฉันใช้ภาพซ้อนทับกันและทุกๆสามวินาทีฉันพยายามทำให้ภาพเคลื่อนไหวเป็นภาพถัดไปในกองซ้อนและโยนภาพปัจจุบันไปที่ด้านล่างของสแต็ก ในขณะเดียวกันฉันก็ใช้ภาพเคลื่อนไหวดังที่แสดงด้านบน ฉันไม่สามารถทำให้มันทำงานได้ตลอดชีวิตของฉัน

คุณสามารถใช้ไลบรารีนี้ซึ่งช่วยให้สามารถปรับขนาดภาพพื้นหลังที่สามารถสไลด์โชว์ได้ ** แบบไดนามิก ** โดยใช้ jquery-backstretch

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