Question

我试图将内联背景样式图像更改为数据背景

这是我期望拥有的示例输出

<div id="parent" style="background-image:url(http://www.example.com/example.jpg);"></div>

转换为

<div id="parent" data-background="http://www.example.com/example.jpg"></div>

但有时数据背景会落入父div之上一级或两级的div中，而不是属于父级div

实施例

   <div data-background="http://www.example.com/example.jpg" id="onediv">
   <div id="anotherdiv">
   <div id="parent"></div>
   </div>
   </div>

所有上述div id仅仅是一个例子

以下是PHP代码我尽我所能，如果有其他选择请建议我谢谢

   function add_background_placeholders( $content ) {
    // Don't lazyload for feeds, previews, mobile
    if( is_feed() || is_preview() )
        return $content;
    // Don't lazy-load if the content has already been run through previously
    if ( false !== strpos( $content, 'data-background' ) )
        return $content;
    preg_match_all('~\bstyle=(\'|")(.*?)background(-image)?\s*:(.*?)\(\s*(\'|")?(?<image>.*?)\3?\s*\);?~i',$content,$matches);

    if( empty( $matches ) ) return $content;

    foreach( $matches[0] as $match ){
         preg_match('~\bbackground(-image)?\s*:(.*?)\(\s*(\'|")?(?<image>.*?)\3?\s*\);?~i',$match,$bg);              
         $bg_less_match = str_replace( $bg[0], '', $match );             
         $data_match = 'data-background="'.$bg['image'].'" '.$bg_less_match;
         $content = str_replace( array($match.';', $match), array( $data_match, $data_match), $content);
    }

  return $content;
}

Answer 1

使用dom php库，获取节点，然后获取background属性。使用正则表达式来处理css以提取url。然后设置data-background属性，然后导出整个dom文档。

例如。http://php.net/manual/en/book.dom.php

这里有几个dom php库

将内联背景图片网址转换为数据背景

1 个答案: