php WordPress 中的 CSS 背景图像

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/43852116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 02:55:00  来源:igfitidea点击:

CSS background images in WordPress

phpcsswordpresswordpress-theming

提问by Reece

Is it possible to get a background image in CSS like you normally do in HTML when working with WordPress. I've tried doing this but it doesn't work.

在使用 WordPress 时,是否可以像通常在 HTML 中那样在 CSS 中获取背景图像。我试过这样做,但它不起作用。

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

回答by Stickers

PHP code cannot run in .cssfile, however you can use inline style, such as:

PHP 代码不能在.css文件中运行,但是您可以使用内联样式,例如:

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

or

或者

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

The above would be useful when working with custom fields for dynamic image paths.

当使用动态图像路径的自定义字段时,上述内容会很有用。

If the image is located in the theme directory, PHP won't be needed, let's say the image folder is directly under the theme folder /theme-name/images, and the stylesheet is /theme-name/style.css, then you can just add the background image to the css file as follows:

如果图片在theme目录下,PHP就不需要了,假设image文件夹在theme文件夹下/theme-name/images,样式表是/theme-name/style.css,那么你可以将背景图片添加到css文件中,如下所示:

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

回答by Alex

You don't need to use PHP in this question, your CSS file is already in template folder, so you can call image just like this:

你不需要在这个问题中使用 PHP,你的 CSS 文件已经在模板文件夹中,所以你可以像这样调用 image:

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

So you don't need to know template path to call images from your theme.

因此,您无需知道模板路径即可从您的主题中调用图像。

回答by mattD

If the image folder is in the theme folder you can use:

如果图像文件夹在主题文件夹中,您可以使用:

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

回答by Arlan T

Another way is accessing image using css file location as the reference point, e.g. .class-name{ background-image:url("../images/file-name"); //one level up, then images folder background-image:url("../../images-directory-02/images/file-name"); //two levels up, then two folders in }

另一种方法是使用 css 文件位置作为参考点访问图像,例如 .class-name{ background-image:url("../images/file-name"); //上一级,然后是图片文件夹 background-image:url("../../images-directory-02/images/file-name"); //上两层,然后是两个文件夹 }

回答by SpyrosKo

I was having this issue with adding a background image to my Underscores based theme and I found this works:

我在向基于下划线的主题添加背景图像时遇到了这个问题,我发现这有效:

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



I first tried:

我第一次尝试:

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

but that didn't work for me.

但这对我不起作用。

回答by Michael Coker

One way would be to add this CSS to a PHP page that has access to the bloginfo()function. Say in index.php, you would add...

一种方法是将此 CSS 添加到有权访问该bloginfo()函数的 PHP 页面。说 in index.php,你会加...

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

回答by Sourov Roy Chowdhury

Use a style attribute in the tag and use the css.

在标签中使用样式属性并使用 css。

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

回答by Masivuye Cokile

As many people have suggested already do not use php in .css ext as it won't get interpreted.

正如许多人已经建议不要在 .css ext 中使用 php 因为它不会被解释。

But if you really need to use php because of some reasons you only know as you not responding, you can change the extension of your stylesheet to .php

但是如果你真的需要使用 php 因为某些你只知道你没有响应的原因,你可以将你的样式表的扩展名更改为 .php

then you can have

那么你可以拥有

customestyles.php

客户样式.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>

回答by Awais Khan

you can't add php code into .css files. but if you wanna do this using php see this.

您不能将 php 代码添加到 .css 文件中。但如果你想使用 php 来做到这一点,请看这个

回答by Donny Bridgen

Short answer is you can not render PHP in a CSS file. I would suggest making sure your <rel>tag is setup correctly and just using the /images/parralax_iamge.jpgpart.

简短的回答是你不能在 CSS 文件中呈现 PHP。我建议确保您的<rel>标签设置正确并且只使用/images/parralax_iamge.jpg零件。