이

Question

내가 CSS 파일에 내 모든 사진과 기본 도메인을 설정하고 싶습니다 "배경 URL"CSS에서 CSS 변수를 사용하는 것을 possibe인가, 여기에 내가 뭘하려입니다 :

global.css

:root 
{ 
    --bgd: #C0C0C0; 
    --picdomain: "https://somedomain.com/"; 
} 

HTML에서

s1.css

@import url("global.css"); 

body 
{ 
    background-color: var(--bgd); //works if only it exist 
    background: url(var(--picdomain)"some/path/images/pic.png"); //no effect 
} 

그리고 부하 s1.css

<link rel="stylesheet" type="text/css" href="s1.css"> 

HTML의 배경색이 변경되었지만 배경이 표시되지 않았습니다.

@picdomain: "https://somedomain.com"; 

이 s1.css

background: url("@picdomain/some/path/images/pic.png"); //can't read variable from imported css 

도움이되지 않았다

global.css 내가 이미지에 대한 전체 URL을 설정하는 동안 만 같이 작동합니다 : 그래서 다른 방법을 시도 아래 :

global.css

:root 
{ 
    --bgd: #C0C0C0; 
    --picdomain: url("https://somedomain.com/some/path/images/pic.png"); 
} 

s1.css

@import url("global.css"); 

body 
{ 
    background-color: var(--bgd); //works if only it exist 
    background: var(--picdomain); //no effect 
} 

그러나 이것은 ...... 내가 원하는 것이 아니다 가능 "배경"에 CSS 변수를 사용하여인가요?

Answer 1

<style type="text/css"> 
    :root { 
     --slide-1: url("{{url('public/assets/images/logo-nfs.png')}}"); /*this is laravel*/ 
     --slide-2: url("<?php echo 'images/logo-nfs.png';?>"); 
    }`enter code here` 

    .header111 { 
     background-image : var(--slide-1); /*this is php*/ 
    } 

    .header22 { 
     background-image : var(--slide-2); 
    } 

    </style> 

<div class="header111"> 
    test here 
</div> 

<div class="header22"> 
    test here 
</div> 
<br>