Question

如何仅替换H1背景图像？这是我的CSS：

h1 a {
margin: 0 auto;
display: block;
background: url('http://mywebsite.com/img/old-logo.png') no-repeat;
}

这是我的preg_replace代码：

$document = preg_replace('/background[-image]*:[\s]*url\(\'?([^\'\)]+)\'?\)/', "background: url('http://mywebsite.com/img/new-logo.png')", $document);

但现在它取代了所有背景图片。

如何解决这个问题？

Answer 1

无论您在网页中使用何处使用h1，请使用id =“h1”并声明您的css为此;

#h1 a {margin: 0 auto;display: block;background: url('http://mywebsite.com/img/old-logo.png') no-repeat;}

然后调用此javascript代码替换h1背景。请#h1与h1不同。

document.getElementById("h1").style.backgroundImage = url("img/new-logo.png");

OR

document.getElementById("h1").style.backgroundImage.src = "img/new-logo.png";<br>

好吧，如果没有工作，那么创建另一个css id标签，将其调用

#h2 a {margin: 0 auto;display: block;background: url('http://mywebsite.com/img/new-logo.png') no-repeat;}

然后，使用下面的javascript代码从h1切换到h2;

document.getElementById("h1").id = "h2";

Answer 2

也许尝试这种模式：

'/h1.*\{.*background[-image]*:[\s]*url\(\'?([^\'\)]+)\'?\).*\}/m'

Answer 3

$document = preg_replace(
    '/((?:^|\s|,)h1(?:[^}]+))background[-image]*:[\s]*url\(\'?([^\'\)]+)\'?\)/m',
    "$1background: url('http://mywebsite.com/img/new-logo.png')",
    $document
);

仅预设替换H1图像

3 个答案: