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背景图片

回答

相关问题