Question

我正在尝试使用background-image通过CSS在WordPress中显示图像，因为我想为移动/桌面显示不同的缩放图像。

如果我将图像插入内嵌，则显示正常。我不希望将其显示为内联，因为我想为特定媒体查询提供不同的图像。因此我尝试使用带有CSS的background-image来显示图像。

我创建了一个名为images的新文件夹，并将我想要的图像从uploads移动到与images位于同一目录的style.css

文件路径为：wp-content/themes/resca-child/images

我在CSS中使用以下代码：

.image1 {
background-image: url('/images/Homepage1-edited.png');
background: no-repeat center center fixed;
background-size: cover;
position: relative;
top: 0;
left: 0;
width: 100%;
max-height: 925px;
}

我玩过不同的文件路径和CSS，我仍然无法加载它。我猜测我有错误的路径优先权或其他什么，但我不知道如何解决。

Answer 1

你可以尝试一种简单的方法，你只需要添加背景图像即

background-image：url（'/ images / Homepage1-edited.png'）;

在你的内联样式中并添加如下假设image1 css应用于div 所以代码应该是

<div class="image1" style =" <?php echo get_template_directory_uri(); ?>background-image: url('/images/Homepage1-edited.png');">

现在你可以将整条路径。当你想要添加动态图像时非常有用，因为从css文件中你无法添加动态图像

我希望它会对你有所帮助:)。

Answer 2

Wordpress在同一路径中有style.css和images文件夹，因此您可以使用images/Homepage1-edited.png等背景图片路径。

.image1 {
    background-image: url('images/Homepage1-edited.png');
}

Answer 3

删除告诉系统在root中查找文件的第一个/：）

如果您的CSS位于相当标准的子目录中，并且您的图像位于img目录中，那么您可以使用../images/Homepage1-edited.png。

但是当你指定它们在SAME目录中时，只需删除斜杠。

Answer 4

您可以添加以下代码的背景图片：

1）<div class="image1" style="background-image:url(<?php echo get_template_directory_uri(); ?>/images/Homepage1-edited.png);">

OR

2）wp-content / themes / resca-child / style.css 在子主题css中添加以下代码

.image1 {
    background-image: url('images/Homepage1-edited.png');
}

如何使用background-image获取图像：WordPress中的CSS

4 个答案: