Tôi đang cố gắng tạo hiệu ứng "làm mờ dần dần" bằng cách sử dụng chuyển tiếp CSS. Nhưng tôi không thể làm điều này để làm việc với hình nền ...

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

Hãy xem: http://jsfiddle.net/AK3La/

Bạn có thể chuyển tiếp background-image. Sử dụng CSS dưới đây trên imgphần tử:

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

Điều này được hỗ trợ bởi Chrome, Opera và Safari. Firefox chưa triển khai nó ( bugzil.la ). Không chắc chắn về IE.

Giải pháp (mà tôi tự tìm thấy) là một trò lừa ninja, tôi có thể cung cấp cho bạn hai cách:

Trước tiên, bạn cần tạo một "thùng chứa" cho <img>nó, nó sẽ chứa các trạng thái bình thường và di chuột cùng một lúc:

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

• với bộ chọn CSS3 http://jsfiddle.net/eD2zL/1/ (nếu bạn sử dụng trạng thái này, trạng thái "bình thường" sẽ là con đầu tiên trong thùng chứa của bạn hoặc thay đổi nth-child()thứ tự)

• Giải pháp CSS2 http://jsfiddle.net/eD2zL/2/ (sự khác biệt giữa chỉ là một vài bộ chọn)

Về cơ bản, bạn cần ẩn trạng thái "bình thường" và hiển thị "di chuột" của chúng khi bạn di chuột

và đó là nó, tôi hy vọng ai đó thấy nó hữu ích.

Tôi đã tìm ra một giải pháp hiệu quả cho tôi ...

Nếu bạn có một mục danh sách (hoặc div) chỉ chứa liên kết và giả sử đây là liên kết xã hội trên trang của bạn tới facebook, twitter, ect. và bạn đang sử dụng một hình ảnh sprite bạn có thể làm điều này:

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

Làm cho "li" nền của hình ảnh nút của bạn

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

Sau đó làm cho hình nền của liên kết ở trạng thái di chuột của nút. Đồng thời thêm thuộc tính opacity vào đây và đặt thành 0.

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

Bây giờ tất cả những gì bạn cần là "độ mờ" trong "a: hover" và đặt giá trị này thành 1.

#facebook a:hover {
   opacity:1;
}

Thêm các thuộc tính chuyển tiếp độ mờ cho mỗi trình duyệt vào "a" và "a: hover" để css cuối cùng sẽ trông giống như thế này:

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

Nếu tôi giải thích nó một cách chính xác sẽ cho phép bạn có một nút hình nền mờ dần, hy vọng nó sẽ giúp ít nhất!

Thật không may, bạn không thể sử dụng chuyển đổi trên background-image, xem danh sách các thuộc tính có thể hoạt hình của w3c .

Bạn có thể muốn làm một số thủ thuật với background-position.

Bạn có thể sử dụng phần tử giả để có được hiệu ứng bạn muốn như tôi đã làm trong 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>

Nếu bạn có thể sử dụng jQuery, bạn có thể thử BgSwitcher plugin để chuyển đổi hình nền với các hiệu ứng, rất dễ sử dụng.

Ví dụ :

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

Và thêm hiệu ứng của riêng bạn, xem thêm một loại hiệu ứng

Hãy thử điều này, sẽ làm cho hoạt hình nền hoạt động trên web nhưng ứng dụng di động lai không hoạt động

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

Xem xét hình ảnh nền không thể hoạt hình, tôi đã tạo một mixin SCSS nhỏ cho phép chuyển đổi giữa 2 hình nền khác nhau bằng cách sử dụng bộ chọn giả trước và sau . Họ đang ở các lớp chỉ số z khác nhau. Cái ở phía trước bắt đầu với độ mờ 0 và hiển thị khi di chuột.

Bạn cũng có thể sử dụng nó theo cách tiếp cận tương tự để tạo hình động với độ dốc tuyến tính.

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

Bây giờ bạn có thể chỉ cần sử dụng nó với

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

Bạn có thể kiểm tra nó ở đây: https://jsfiddle.net/pablosgpacheco/01rmg0qL/

Nếu hoạt hình opacitykhông phải là một lựa chọn, bạn cũng có thể làm độngbackground-size .

Ví dụ, tôi đã sử dụng CSS này để đặt backgound-imageđộ trễ.

.before {
  background-size: 0;
}

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

Salam, câu trả lời này chỉ hoạt động trong Chrome, khiến IE và FF hỗ trợ chuyển màu.

Không cần thiết phải tạo các thành phần HTML của bạn opacity:0, vì đôi khi chúng chứa văn bản và không cần phải tăng gấp đôi các yếu tố của bạn!.

Câu hỏi có liên kết đến một ví dụ trong jsfiddle cần một thay đổi nhỏ, đó là đặt một hình ảnh trống .title agiống như background:url(link to an empty image);khi bạn đặt nó vào .title a:hovernhưng làm cho nó thành hình ảnh trống và mã sẽ hoạt động.

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

Hãy xem https://jsfiddle.net/Tobasi/vv8q9hum/

Với bài viết đầy cảm hứng của Chris tại đây:

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

Tôi quản lý để đưa ra điều này:

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

Điều này có thể đạt được với sự hỗ trợ nhiều trình duyệt hơn so với câu trả lời được chấp nhận bằng cách sử dụng các yếu tố giả như được minh họa bằng câu trả lời này: https://stackoverflow.com/a/19818268/2602816

Tôi đã vật lộn với điều này một chút, lần đầu tiên tôi sử dụng một chồng hình ảnh chồng lên nhau và cứ sau ba giây, tôi lại cố gắng làm động với hình ảnh tiếp theo trong ngăn xếp và ném hình ảnh hiện tại xuống dưới cùng của ngăn xếp. Đồng thời tôi đang sử dụng hình ảnh động như hình trên. Tôi không thể làm cho nó hoạt động cho cuộc sống của tôi.

Bạn có thể sử dụng thư viện này cho phép ** hình nền có khả năng thay đổi kích thước, có khả năng trình chiếu ** bằng cách sử dụng jquery-backstretch.

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