背景CSS屬性

的參數化url屬性，我有我的style.css 其中我定義我的背景圖片爲我的引導容器作爲背景CSS屬性

.container-fluid.bg-img { 
    background: 
    linear-gradient(
     rgba(0, 0, 0, 0.5), 
     rgba(0, 0, 0, 0.5) 
    ), 
    url('/my/image'); 
    background-size: cover; 
    color: #ffffff; /* White */; 
}

截至目前，該URL在CSS硬編碼。我如何從我的html中更改它，如我所願？喜歡的東西（當然是僞代碼）：

<div class="container-fluid bg-img {new_url}"> 
    ... 
</div>

我有PHP的基本知識，我希望我可以用它來實現我需要什麼。

編輯1

至於建議的@Lukas MEINE我試圖jQuery的方式。我實際上嘗試的是將一個函數插入到一個js文件（scripts.js）中，其中我想要的圖像url的變量是參數化的。然後，我會在我的HTML定義它，如：

scripts.js中

function def_background(img_url) { 
    $('.container-fluid').css('background-image','url(img_url)'); 
} 

$(document).ready(function() { 
    def_background(img_url); 
});

從我的HTML，我會再做電：

<script src="./js/scripts.js"> 
    def_background(img_url); 
</script>

當然我收到說明img_url未被定義的錯誤。但是，我將如何從我的HTML中定義它？我是否應該在我的scripts.js中聲明一個臨時值，然後從HTML中覆蓋它？

目前，我從我的CSS中刪除了url屬性，因爲我需要以參數方式定義它（我的實際目標）。

.container-fluid.bg-img { 
    background: 
    linear-gradient(
     rgba(0, 0, 0, 0.5), 
     rgba(0, 0, 0, 0.5) 
    ), 
    /* url('/my/image') */ 
    ; 
    background-size: cover; 
    color: #ffffff; /* White */; 
}

EDIT 2

回事測試... 我只需要創建一個（工作）bootply這說明正是我需要的。但是，我無法在我的實際代碼中重現該行爲。唯一的區別是我需要從我的HTML中調用jQuery函數，而不是在與bootply中相同的jQuery中。另外，還有其他人在HTML之前調用js，如果可能會引起興趣，我也會添加它們。

啊，最後一兩件事：我的HTML反倒.php擴展名（所以基本上他們在實踐中的PHP文件），不知道這使這裏真正的區別...

無論如何，這裏是我的文件，截至目前：

的style.css

.container-fluid.bg-img { 
    background: 
    linear-gradient(
     rgba(0, 0, 0, 0.5), 
     rgba(0, 0, 0, 0.5) 
    ); 
    background-size: cover; 
    color: #ffffff; /* White */; 
}

umbe.js

function def_background(url) { 
    $(".container-fluid.bg-img").css("background","url('"+ url +"')"); 
}

animazione。PHP（只）

<head> 
    <title>Sito di Mario Smedile</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <!-- my CSS --> 
    <link rel="stylesheet" href="./css/style.css"> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <!-- my JS --> 
    <script src="./js/umbe.js"> 
    </script> 
    <script> 

     img_url = 'http://via.placeholder.com/350x150/1E90FF'; 
     def_background(img_url); 
    </script> 

    <!-- Latest compiled JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <!-- Include some php --> 
    <?php include './php/functions.php';?> 

    </head>

來源

2017-06-22 umbe1987

使用Javascript。在這種情況下，我也使用jquery。

$(document).on('ready',function(){ 

$('.container-fluid').css('background-image','url("yournewurl")'); 

});

Javascript是用來操縱html的。加載頁面後，您無法在HTML中進行更改，因爲php是server side語言。

編輯：

HTML包括您scripts.js中的文件，然後定義變量，並調用該函數。

<head> 
<script src="./js/scripts.js"></script> 

<script> 
    img_url = "define whatever you want here in the html"; 
    def_background(img_url); 
</script> 

</head>

scripts.js中卸下準備觸發

function def_background(img_url) { 
$('.container-fluid').css('background-image','url(img_url)'); 
}

來源

2017-06-22 21:30:22

很抱歉這麼晚纔回復的。我正在嘗試你的方法。我想要在我的HTML文檔之外提供您所建議的功能，並將變量「yournewurl」設爲參數。這可能嗎？我會編輯我的問題發佈我的嘗試。 – umbe1987

剛編輯我的答案，以適應您的需求。看看;） –

它不工作不幸....我製作了（工作）bootply模仿我的需求，並更新我的問題，目前顯示我的代碼。 https://www.bootply.com/idEnpchnXq – umbe1987

.gradient1 { 
 
    background: linear-gradient(#fff, #000); 
 
} 
 
.bg { 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

<div class="gradient1"> 
 
    <div class="bg" 
 
    style="background-image: url('https://www.google.com.ua/images/nav_logo242.png')" 
 
    >test</div> 
 
</div>

來源

2017-06-22 22:02:32 Mixa

回答

相關問題