jQuery CSS 속성을 사용하여 배경 이미지 설정


377

imageUrl변수에 이미지 URL이 있고 jQuery를 사용하여 CSS 스타일로 설정하려고합니다.

$('myObject').css('background-image', imageUrl);

다음과 같이 작동하지 않는 것 같습니다.

console.log($('myObject').css('background-image'));

을 반환합니다 none.

어떤 생각, 내가 뭘 잘못하고 있니?


1
정확히 무엇이 문제입니까? Jquery에서 오류가 발생합니까?
Mike_G

아니요, 제대로 설정하지 않았습니다. 로깅 중이며 변경되지 않습니다.
Blankman

2
jQuery가 처음으로 사용자가 무엇을 의미하는지 추측하지 않습니다.
gblazex

답변:


924

아마 이것을 원할 것입니다 (일반적인 CSS 배경 이미지 선언처럼 만들기 위해) :

$('myObject').css('background-image', 'url(' + imageUrl + ')');

나는 이런 식으로하고 있었지만 'url'과 왼쪽 괄호 사이의 공백으로 인해 코드가 실패했습니다. 복사하여 붙여 넣은 후 문제를 깨달았습니다. 감사!
pmartin

이 스크립트에서 코드를 사용하고 있지만 배경 이미지가 나타납니다. url ((unknown)); 이것은 내 스크립트입니다. var bg_img = jQuery ( '. wp-show-posts-inner'). attr ( 'data-src'); jQuery ( '. wp-show-posts-inner'). on ( 'mouseover', function () {jQuery ( '. home-banner .bg'). css ( 'background-image', 'url ('+ bg_img + ')');}); 왜 그런지 알아?
Gaston Coroleu

71

다음과 같이 imageUrl 전후에 큰 따옴표 ( ")를 포함 시키려고합니다.

$('myOjbect').css('background-image', 'url("' + imageUrl + '")');

이렇게하면 이미지에 공백이있는 경우 여전히 속성으로 설정됩니다.


6
이 경우$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');
Arosboro


이것은 나를 위해 해결했습니다. 큰 따옴표가 필요했습니다. 내 이미지 이름에 공백이 포함되어 있습니다. 그렇지 않으면 아무 일도 일어나지 않습니다. 나는 $('.myObject').css('background-color', 'green'); 작동하는 것을 얻을 수는 있지만 큰 따옴표없이 이미지를 변경하지는 않습니다. 감사!
고스트 에코

1
encodeURIComponentURL의 일부에 이미 이스케이프 문자가 포함되어 있으면 작동하지 않습니다. 당신은 이미지 URL에 잠재적 인 큰 따옴표를 이스케이프해야하지만 :$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');
니콜라스 가니 에르

의해, $('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');나에게 준background-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");
Daerik

47

다른 사람들이 올바르게 제안하는 것 외에도 개별 CSS 설정 (특히 배경 이미지 URL) 대신 CSS 클래스를 전환하는 것이 더 쉽다는 것을 알았습니다. 예를 들면 다음과 같습니다.

// in CSS 
.bg1 
{
  background-image: url(/some/image/url/here.jpg);
}

.bg2 
{
  background-image: url(/another/image/url/there.jpg);
}

// in JS
// based on value of imageUrl, determine what class to remove and what class to add.
$('myOjbect').removeClass('bg1').addClass('bg2');

2
이것은 CSS 프리 프로세서를 사용할 수 있기 때문에 훨씬 더 좋은 방법입니다.
calumbrodie

이것은 더 직접적인 솔루션보다 훨씬 좋습니다.
Magicode

그래도 두 이미지를 모두로드합니다.
sheriffderek

이것이 실제로 권장되는 솔루션입니까? 불필요한 추가 정보가 필요한 것 같습니다. 예를 들어 가능한 세 번째 배경 이미지가있는 경우 다른 모든 배경 이미지를 제거하거나 "현재"이미지를 추적해야합니다. 또한 .css 파일의 이러한 URI와 같은 구성 세부 정보를 갖는 것은 나를 미치게합니다. : 스마일리 : 코드 전체를 검색해야합니다!
앤 반 로섬

이와 같은 클래스를 사용하면 코드와 스타일을 깔끔하게 구분할 수 있으므로 선호합니다. 그런 다음 코드를 손상시키지 않고 CSS의 모든 이미지와 애니메이션을 미디어 선택기 등을 통해 변경할 수 있습니다. 이미지를 코드 외부로 유지하면 코드 전체를 검색 할 필요가 없습니다!
Evan Langlois

14

내 코드는 다음과 같습니다.

$ ( 'body'). css ( '배경 이미지', 'url ( "/ apo / 1.jpg")');

즐기십시오, 친구


13

다른 답변 외에도 "배경"을 사용할 수도 있습니다. 배경과 같이 이미지가 사용되는 방식과 관련된 다른 속성을 설정하려는 경우 특히 유용합니다.

$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");

이 답변은 원래 op가 배경 이미지가 아닌 배경을 사용했다고 생각했을 때 더 의미가 있습니다. 좀 더 이해하기 위해 대답을 수정했습니다. 어쨌든 이것을 후손을 위해 남겨 두겠습니다.
매트 파 킨스

6

변수가 아닌 실제 URL을 사용하는 경우 :

$('myObject').css('background-image', 'url(../../example/url.html)');

3

"style"속성을 수정하십시오.

$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');

1
다른 모든 스타일을 대체합니다. 권장하지 않음
melvin

2

구조에 대한 문자열 보간.

let imageUrl = 'imageurl.png';
$('myOjbect').css('background-image', `url(${imageUrl})`);

1

내가 가진 문제 ;url()값 끝에 세미콜론 을 계속 추가 하여 코드가 작동하지 않는다는 것 입니다.

작동하지 않는 코드 :

$('#image_element').css('background-image', 'url(http://example.com/img.jpg);');

작업 코드 :

$('#image_element').css('background-image', 'url(http://example.com/img.jpg)');

;작업 코드의 끝에 생략 된 세미콜론이 있습니다. 나는 단지 올바른 구문을 몰랐다. 그리고 그것을 알아 차리는 것은 정말로 어렵다. 바라건대 이것은 같은 보트에있는 다른 사람을 돕습니다.


0

jQuery CSS 함수를 사용하면 객체를 전달할 수 있으므로 여러 항목을 동시에 설정할 수 있습니다. 응답 된 코드는 다음과 같습니다.

$(this).css({'background-image':'url(' + imageUrl + ')'})


-3
$ ( 'myObject'). css ({ 'background-image': 'url (imgUrl)',});

URL이 작은 따옴표로 묶여 있기 때문에 작동하지 않습니다.
Sal
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.