Làm thế nào để mờ dần thay đổi hình nền

Question

Tôi muốn phai những hình ảnh khi tôi làm mã này:

$("#large-img").css('background-image', 'url('+$img+')'); 

Tôi đã thử đặt phai trong rất nhiều nơi.

Cảm ơn

Answer 1

Đây có lẽ là những gì bạn muốn:

$('#elem').fadeTo('slow', 0.3, function() 
{ 
    $(this).css('background-image', 'url(' + $img + ')'); 
}).fadeTo('slow', 1); 

Với 1 giây chậm trễ:

$('#elem').fadeTo('slow', 0.3, function() 
{ 
    $(this).css('background-image', 'url(' + $img + ')'); 
}).delay(1000).fadeTo('slow', 1); 

Answer 2

Opacity phục vụ mục đích của bạn?

Nếu vậy, hãy thử này:

$('#elem').css('opacity','0.3') 

Answer 3

Nếu bạn cố gắng để phai hình ảnh backgound nhưng rời khỏi văn bản foreground/images bạn có thể sử dụng css để tách hình nền vào một vị trí div và mới nó trên div chứa văn bản/hình ảnh sau đó làm mờ div nền.

Answer 4

này có thể giúp

HTML

<div id="textcontainer">   
    <span id="sometext">This is some information </span> 
    <div id="container"> 

    </div> 
</div> 

CSS

01.

#textcontainer{ 
    position:relative; 
    border:1px solid #000; 
    width :300px; 
    height:300px; 
} 
#container{ 
    background-image :url("http://dcooper.org/gallery/cf_appicon.jpg"); 
    width :100%; 
    height:100%; 
} 
#sometext{ 
    position:absolute; 
    top:50%; 
    left:50%; 
} 

Js

$('#container').css('opacity','.1'); 

Answer 5

Tôi có thể cung cấp một giải pháp thay thế?

Tôi có cùng vấn đề này và phai không hoạt động vì nó đã làm mờ toàn bộ phần tử, không chỉ nền. Trong trường hợp của tôi yếu tố là cơ thể, vì vậy tôi chỉ muốn làm mờ đi nền.

Cách thanh lịch để giải quyết vấn đề này là phân loại phần tử và sử dụng chuyển tiếp CSS3 cho nền.

transition: background 0.5s linear;

Khi bạn thay đổi nền, hoặc với toggleClass hoặc với mã của bạn, $("#large-img").css('background-image', 'url('+$img+')'); nó sẽ mờ dần theo quy định của lớp.

Answer 6

Xây dựng dựa trên giải pháp của Nhóm quảng cáo sáng tạo ở trên, tôi đã sử dụng jQuery để thay đổi hình nền của thẻ body:

ví dụ:

$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-sea.jpg) fixed', 'background-size': '100% 100%'}); 

$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-trees.jpg) fixed', 'background-size': '100% 100%'}); 

Tôi có bộ hẹn giờ javascript chuyển đổi giữa hai câu lệnh.

Tất cả tôi phải làm gì để giải quyết vấn đề của việc tạo ra một fadeOut -> fadeIn hiệu lực thi hành đã đề nghị sử dụng tràn lan Creative Group và thêm

transition: background 1.5s linear; 

để mã của tôi. Bây giờ nó biến mất và đẹp.

Xin cảm ơn Nhóm quảng cáo và món súp thịnh vượng của chúng tôi!

Answer 7

Đây là điều hợp lý duy nhất tôi tìm thấy để làm mờ hình nền.

<div id="foo"> 
    <!-- some content here --> 
</div> 

CSS của bạn; hiện được cải tiến với CSS3 transition.

#foo { 
    background-image: url(a.jpg); 
    transition: background 1s linear; 
} 

Bây giờ trao đổi trên các nền

document.getElementById("foo").style.backgroundImage = "url(b.jpg)"; 

Thì đấy, nó mất dần!

---

từ chối trách nhiệm rõ ràng: nếu trình duyệt của bạn không hỗ trợ thuộc tính CSS3 transition, điều này sẽ không làm việc. Trong trường hợp đó, hình ảnh sẽ thay đổi mà không cần một quá trình chuyển đổi. Do <1% trình duyệt của người dùng của bạn không hỗ trợ CSS3, điều đó có thể là tốt. Đừng tự nhủ, được rồi.

Answer 8

Một người nào đó đã chỉ cho tôi chủ đề này vì tôi có cùng vấn đề này nhưng nó không hiệu quả với tôi. Sau nhiều giờ tìm kiếm, tôi đã tìm thấy giải pháp bằng cách sử dụng tùy chọn này - https://github.com/rewish/jquery-bgswitcher#readme

Nó còn có một vài tùy chọn khác ngoài mờ dần.