jQuery를 사용하여 클래스를 기반으로 인라인 스타일에 두 번째 배경을 삽입하는 방법은 무엇입니까?

Question

이 문제를 검색했지만 찾을 수 없으므로 도움을 얻을 수있었습니다.

동적으로 호출되는 배경 이미지가있는 머리글 div가 있으므로 스타일 속성을 사용하여 배경 이미지를 인라인이라고 부릅니다. 두 번째 배경 위에 CSS 그라디언트의 최상위 레이어가 있어야하므로 CSS를 여러 배경으로 사용해야합니다. 그러나 사진의 주 어두운 부분인지 어두운 부분인지에 따라 그라디언트 색상, 검은 그라디언트 또는 흰색 그라디언트의 두 가지 옵션이 있습니다. 따라서 관리자가 페이지를 설정하면 사진을 업로드 한 다음 상단에 밝거나 어두운 그라디언트가 필요한지 결정합니다. 이것은 ACF 필드에 의해 수행됩니다. 그들은 이것을 결정하고 코드에는 'light'또는 'dark'클래스가 추가되었습니다. 내가 필요로하는 그래서

<section id="header-block" style="background-image: url(<?php echo $feat_image[0]; ?>);" class="<?php if(get_field('header_theme') == 'dark'): ?>dark<?php elseif(get_field('header_theme') == 'light'): ?>light<?php endif; ?>"> 

클래스 '는'빛 '또는인지에 따라 스타일 속성에서'URL '전에 문자열로 삽입 할 수있는 두 번째 선형 그라데이션 배경입니다 : 여기

내 코드입니다 어두운'. 클래스는 '어두운'이다

linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%), 

경우 나 :

그래서 삽입 클래스 '빛'이다

linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(255,255,255,0) 70%), 

합니다.

는 결과 (한 예) 될 것이다 : 나는이 작업을 수행하려면 어떻게

<section id="header-block" style="background-image: linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%), url('/path/to/image.jpg');" class="dark"> 

?

Answer 1

:

$(".dark, .light").each(function() { 
 
\t $this = $(this); 
 
    back = $this.css("backgroundImage"); 
 
    
 
    if ($this.hasClass('dark')) { 
 
    \t lin = "linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%), " 
 
    } else if ($this.hasClass('light')) { 
 
    \t lin = "linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(255,255,255,0) 70%), "; 
 
    } 
 
    
 
    $this.css("backgroundImage", lin + back) 
 
    
 
})

.light-bk { 
 
    background-image: linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%); 
 
    } 
 

 
.dark-bk { 
 
    background-image: linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(255,255,255,0) 70%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section style="background-image: url('/path/to/image.jpg');" class="js-addBG dark">

(코드 검사 결과를 보려면

JSfiddle

Answer 2

오버레이를 만들기 위해 해당 블록에 의사 요소를 사용합니다.

#header-block { 
 
    position: relative; 
 
    /* you don't need this height/width, just for my demo */ 
 
    width: 560px; height: 400px; 
 
} 
 

 
#header-block:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
} 
 

 
#header-block.light:after { 
 
    background-image: linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%); 
 
} 
 

 
#header-block.dark:after { 
 
    background-image: linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(255,255,255,0) 70%); 
 
}

<section id="header-block" style="background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);" class="dark"> 
 
</section> 
 

 
<section id="header-block" style="background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);" class="light"> 
 
</section>

당신이 사용하는 것이 마이클 코커가 언급 한 바와 같이 의사를 사용할 수 있지만이 사용 jQuery를 달성하기 위해