Preg仅替换H1图像

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");

或

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

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

Answer 3

也许可以试试这个模式：

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