WordPress中的CSS背景圖片

在使用WordPress時，是否可以像在HTML中一樣使用CSS來獲取背景圖片？我試過這樣做，但它不起作用。WordPress中的CSS背景圖片

background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");

來源

2017-05-08 Reece

不，你不能在這樣的CSS文件中集成php代碼。 – Exprator

這是在一個PHP文件或CSS？ 'bloginfo'做什麼？如果它不輸出任何內容，則PHP調用將不會執行任何操作（假定這是一個PHP文件）。 – chris85

這是一個css文件。 <？php bloginfo（'template_directory'）; ？>基本上獲得我的主題的根目錄 – Reece

PHP代碼不能在.css文件中運行，但是你可以使用內聯樣式，如：

<div style="background-image: url("<?php //url ?>");">

或

<style> 
    .class-name { 
    background-image: url("<?php //url ?>"); 
    } 
</style>

自定義字段時，以上將是有益的用於動態圖像路徑。

如果圖像位於主題目錄中，則不需要PHP，假設圖像文件夾直接位於主題文件夾/theme-name/images下，樣式表爲/theme-name/style.css，那麼您可以將背景圖像添加到css文件如下：

.class-name { 
    background-image: url("images/file.jpg") 
}

來源

2017-05-08 16:03:17 Stickers

簡短的回答是你不能在一個CSS文件中呈現PHP。我建議您確保您的<rel>標籤安裝正確，並且只使用/images/parralax_iamge.jpg部件。

來源

2017-05-08 15:57:42

只需在頁面中使用瀏覽器工具/檢查器查找相應的元素（標記，類或ID），然後在該子元素的樣式表中或在「customCSS」字段中爲該元素添加CSS規則主題選項。

來源

2017-05-08 15:58:11 Johannes

你並不需要在這個問題上使用PHP，CSS文件已經在模板文件夾中，這樣你就可以調用圖像就像這樣：

background-image: url("images/parallax_image.jpg");

所以，你不需要知道模板從主題調用圖像的路徑。

來源

2017-05-08 16:00:04 Alex

一種方法是將此CSS添加到可訪問bloginfo()函數的PHP頁面。說，在index.php，你想補充...

<style> 
    .some-element { 
    background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg "); 
    } 
</style>

來源

2017-05-08 16:00:55

不能添加PHP代碼到.css文件。但是如果你想用php做這個，請參見this。

來源

2017-05-08 16:01:42

在標籤中使用樣式屬性並使用CSS。

<div style="background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");"> 
Your other html here 
</div>

來源

2017-05-08 16:01:58

風格屬性不符合標準並被認爲是有害的。見https://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css – codecandies

許多人建議已經不要在.css中使用php，因爲它不會被解釋。

但如果你真的需要使用PHP，因爲某些原因，你才知道，你不迴應，你可以改變你的樣式表的擴展.PHP

那麼你可以有

customestyles。PHP

<?php 
    header("Content-type: text/css; charset: UTF-8"); 
    $sectionImage = bloginfo('template_directory')."/images/parallax_image.jpg"; 

?> 
<style type="text/css"> 

    .selector{ 

     background-image: url(<?php echo "$sectionImage";?>); 
    } 
</style>

來源

2017-05-08 16:12:49

如果圖像文件夾是在主題文件夾可以使用：

background-image: url("/wp-content/themes/themeNameHere/images/parallax_image.jpg ");

來源

2017-11-12 16:15:06 mattD

這個解決方案回答了這個問題 - 它的工作原理！ – ElmerCat

的另一種方法使用CSS文件的位置作爲基準點正在訪問圖像，例如 .class-name { background-image：url（「../ images/file-name」）; //上一級，然後圖像文件夾background-image：url（「../../ images-directory-02/images/file-name」）; //向上兩級，然後在兩個文件夾}

來源

2017-12-26 00:02:48

我是有添加背景圖片到我的下劃線基於主題的這個問題，我發現這工作：

background: url('assets/img/tile.jpg') top left repeat;

我第一次嘗試：

background: url('/wp-content/themes/underscores/assets/img/tile.jpg');

但這並不適用於我。

來源

2018-02-09 03:02:23 Thinnling

WordPress中的CSS背景圖片

回答

相關問題