div background-image url as string

时间：2013-02-10 17:27:30

标签： string image url html background

如何让div背景图像读取字符串url？我正在尝试从我的Shoutcast源代码中获取代码，并且我已经使用rtrim代码从文件右侧获取最后的x个字符，然后让代码使其成为自己的字符串，然后从原始字符串中删除。现在我希望第二个字符串放在图像格式（.jpg）的前面，并将图像作为背景图像读取到我的div对象。

<head>
$song2 = $song
.a-art {background-image: url('.$song2.'.jpg);}
</head><body>

<div class="a-art"></div>
</body>

来自全部来源

  <?php



include('config_radio.php');



$scfp = fsockopen("$scip", $scport, &$errno, &$errstr, 30);

 if(!$scfp) {

  $scsuccs=1;

echo''.$scdef.' is Offline'; 

 }

if($scsuccs!=1){

 fputs($scfp,"GET /admin.cgi?pass=$scpass&mode=viewxml HTTP/1.0\r\nUser-Agent: SHOUTcast Song Status (Mozilla Compatible)\r\n\r\n");

 while(!feof($scfp)) {

  $page .= fgets($scfp, 1000);

 }

######################################################################################################################

/////////////////////////Teil 1 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

//definieren der xml elemente

 $loop = array("STREAMSTATUS", "BITRATE", "SERVERTITLE", "CURRENTLISTENERS", "MAXLISTENERS", "BITRATE");

 $y=0;

 while($loop[$y]!=''){

  $pageed = @ereg_replace(".*<$loop[$y]>", "", $page);

  $scphp = strtolower($loop[$y]);

  $$scphp = @ereg_replace("</$loop[$y]>.*", "", $pageed);

  if($loop[$y]==SERVERGENRE || $loop[$y]==SERVERTITLE || $loop[$y]==SONGTITLE || $loop[$y]==SERVERTITLE)

   $$scphp = urldecode($$scphp);

  $y++;

 }

//ende intro der xml elemente

######################################################################################################################

######################################################################################################################

/////////////////////////Teil 2\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

//Song Info und History holen.

 $pageed = @ereg_replace(".*<SONGHISTORY>", "", $page);

 $pageed = @ereg_replace("<SONGHISTORY>.*", "", $pageed);

 $songatime = explode("<SONG>", $pageed);

 $r=1;

 while($songatime[$r]!=""){

  $t=$r-1;

  $playedat[$t] = @ereg_replace(".*<PLAYEDAT>", "", $songatime[$r]);

  $playedat[$t] = @ereg_replace("</PLAYEDAT>.*", "", $playedat[$t]);

  $song[$t] = @ereg_replace(".*<TITLE>", "", $songatime[$r]);

  $song[$t] = @ereg_replace("</TITLE>.*", "", $song[$t]);

      if (strlen($song[$t]) > 50)       {                   $song[$t] = substr($song[$t], 0, 50) . '...';       }
     $song2 = substr($song[$t], -5);
     <?php $file = "$song2"; ?>
      $song[$t] = urldecode($song[$t]);
     $stemp = explode("[", $song[$t]);
     $song[$t] = $stemp['0'];
     $dj[$t] = @ereg_replace(".*<SERVERTITLE>", "", $page);

  $dj[$t] = @ereg_replace("</SERVERTITLE>.*", "", $pageed);

$r++;

 }

//end song info

fclose($scfp);

}



//Anzeige

if($streamstatus == "1"){



echo'

<html> <head> <title>Radiostatus</title> <meta http-equiv="refresh" content="20; URL=radiostatus.php">  <link href="http://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet" type="text/css"> <style type="text/css"> body {font-weight: bold; font-size: 11px; font-family: Arial, Verdana; color: #911c15; text-shadow: 1px 1px 0px #ee9955;} .inlineimg {position: absolute; right: 22px; top: 11px;} .playerid {position: absolute; right: 40px; top: 8px;} .header-subfont {color: #FFF; text-transform: capitalize; font-size: 14px; font-weight: normal; text-shadow: 1px 1px 0px #d34715; font-family: "Francois One",sans-serif;} .connect {color: #FFF; font-size: 11px; font-weight: normal; text-shadow: 1px 1px 0px #d34715; /* font-family: "Francois One",sans-serif;*/ font-family: Arial, Verdana; } .help {position: absolute; right: 2px; top: 8px;}  .radio-content {font-size: 11px; height: 40px; margin-right: 15px; font-weight: bold; font-family: Arial, Verdana; /* background: url(x2/images/literecords/misc/literadio-icon.png) no-repeat center left; padding-left: 37px; */ color: #911c15; text-shadow: 1px 1px 0px
#ee9955;} span.question {   cursor: pointer;   width: 16px;   height: 16px;   background-color: #9F3422;   color: White;   font-size: 13px;  font-weight: bold;   border-radius: 8px;   text-align: center; } span.question:hover { background-color: #3D6199; } div.tooltip {   background-color: #333;   color: White;   position: absolute;   left: 25px;   top: -25px;   z-index: 1000000;   width: 250px;   border-radius: 5px; } div.tooltip:before {   border-color: transparent
#333 transparent transparent;   border-right: 6px solid #333;   border-style: solid;   border-width: 6px 6px 6px 0px;   content: "";   display: block;   height: 0;   width: 0;   line-height: 0;   position: absolute;   top: 40%;   left: -6px; } div.tooltip p {   margin: 10px;  color: White; } .song-links a, .song-links { font-size: 8px; text-decoration: none; font-weight: normal; text-shadow: none; color:
#fff;} .song-bg {background-image: url(blackgrad.png); background-size: 100% 100%; position: fixed; right: 6px; font-weight: normal !important; text-transform:capitalize; box-shadow: 0px 0px 1px 1px #cccccc; border-radius: 8px; margin-top: 4px; margin-bottom: 4px; margin-right: 4px; padding: 8px; color: #ffffff; text-shadow: 1px 1px 0px #494949; width: 150px; height: 26px;} .a-art {position: fixed; box-shadow: 0px 0px 1px 1px #cccccc; border-radius: 8px; margin-top: 4px; margin-bottom: 4px; margin-right: 4px; color: #ffffff; text-shadow: 1px 1px 0px #494949; width: 45px; height: 42px; background-image: url('<?php echo '/albumart/'. $file.'.jpg'; ?>'); background-size: 100% 100%; background-repeat: no-repeat;}

.header-font {color: #FFF; text-transform: uppercase; font-size: 15px; font-weight: normal; text-shadow: 1px 1px 0px #d34715; font-family: "Francois One",sans-serif; margin-left: 40px; margin-top: -27px;} .lst-bg {font-weight: normal !important; text-transform:capitalize; box-shadow: 0px 0px 1px 1px #cccccc; border-radius: 8px; margin-top: 0px; margin-bottom: 10px; width: 45px; color: #ffffff; text-shadow: 1px 1px 0px #494949;} .lstnrs {align: center; font-weight: normal; margin-top: -13px; text-align: center; float: left; margin-left: 5px; width: 35px; color: #ffffff; text-shadow: 1px 1px 0px #494949;

</style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="http://literecords.com/drop.js"></script> </head>

<div class="radio-content"> <div class="lst-bg"><span title="Online"><img src="on.png" /></span><span align="center" class="lstnrs">&nbsp;&nbsp;'.$currentlisteners.'</span></div> <div class="header-font">&nbsp;&nbsp; LRR</div> <div class="a-art"></div> <div class="song-bg"> '.$song[0].' . '.$song2.'</div></div> <center><table border="0" cellspacing="0" cellpadding="0" style="display: none;">

<tr> <td align="center"><font color="#33ff00" size=1.5 face="verdana, geneva, lucida"><b>Server is Online</b></font></td> </tr> <tr>

<tr> <td align="center"><font color="#000000" size=1.5 face="verdana, geneva, lucida">Online with: '.$currentlisteners.' / '.$maxlisteners.' listeners</font><br><br></td> </tr> <tr> <td align="center"><b><font color="#000000" size=1.5 face="verdana, geneva, lucida">'.$song[0].'</font></b></td> </tr> <tr> <td align="center"><font color="#000000" size=1.5 face="verdana, geneva, lucida"><a href="http://lazyrecords.net:8020" target="_blank">http://lazyrecords.net:8020</a></font></td> </tr> <tr> <td align="center"><a href="http://lazyrecords.net:8020/listen.pls"><font color="#000000" size=1.5 face="verdana, geneva, lucida">iPhone</font></a> - <a href="listen.asx" target="_blank"><font color="#000000" size=1.5 face="verdana, geneva, lucida">Windows</font></a> - <a href="listen_qt.php" target="_blank"><font color="#000000" size=1.5 face="verdana, geneva, lucida">Mac</a></font></td> </tr> <tr> <td align="center"><a href="http://lazyrecords.net/network/content.php?131-How-to-tune-in" target="_blank"><font color="#000000" size=1.5 face="verdana, geneva, lucida">Cant Tune-In?</font></a></td> </tr> <tr> </table></center>

</body> </html>';

}

if($streamstatus == "0") {

//Offlinestatus

echo'

<html>

<head> <title>Radiostatus</title> <meta http-equiv="refresh" content="20; URL=radiostatus.php">  <link href="http://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet" type="text/css"> <style type="text/css"> body {font-weight: bold; font-size: 11px; font-family: Arial, Verdana; color: #911c15; text-shadow: 1px 1px 0px #ee9955;} .inlineimg {position: absolute; right: 22px; top: 11px;} .playerid {position: absolute; right: 40px; top: 8px;} .header-font {color: #FFF; text-transform: uppercase; font-size: 15px; font-weight: normal; text-shadow: 1px 1px 0px #d34715; font-family: "Francois One",sans-serif; margin-left: 40px; margin-top: -27px;} .header-subfont {color: #FFF; text-transform: capitalize; font-size: 14px; font-weight: normal; text-shadow: 1px 1px 0px #d34715; font-family: "Francois One",sans-serif;} .connect {color: #FFF; font-size: 11px; font-weight: normal; text-shadow: 1px 1px 0px
#d34715; /* font-family: "Francois One",sans-serif;*/ font-family: Arial, Verdana; } .help {position: absolute; right: 2px; top: 8px;}  .radio-content {font-size: 11px; height: 40px; margin-right: 15px; font-weight: bold; font-family: Arial, Verdana; /* background: url(x2/images/literecords/misc/literadio-icon.png) no-repeat center left; padding-left: 37px; */ color: #911c15; text-shadow: 1px 1px 0px
#ee9955;} span.question {   cursor: pointer;   width: 16px;   height: 16px;   background-color: #9F3422;   color: White;   font-size: 13px;  font-weight: bold;   border-radius: 8px;   text-align: center; } span.question:hover { background-color: #3D6199; } div.tooltip {   background-color: #333;   color: White;   position: absolute;   left: 25px;   top: -25px;   z-index: 1000000;   width: 250px;   border-radius: 5px; } div.tooltip:before {   border-color: transparent
#333 transparent transparent;   border-right: 6px solid #333;   border-style: solid;   border-width: 6px 6px 6px 0px;   content: "";   display: block;   height: 0;   width: 0;   line-height: 0;   position: absolute;   top: 40%;   left: -6px; } div.tooltip p {   margin: 10px;  color: White; } .song-links a, .song-links { font-size: 8px; text-decoration: none; font-weight: normal; text-shadow: none; color:
#fff;} .song-bg {font-weight: normal !important; text-transform:capitalize; box-shadow: 0px 0px 1px 1px #ee9955; border-radius: 8px; margin-top: 4px; margin-bottom: 4px; padding: 8px; color: #ffffff; text-shadow: 1px 1px 0px #494949;}

.lst-bg {font-weight: normal !important; text-transform:capitalize; box-shadow: 0px 0px 1px 1px #ee9955; border-radius: 8px; margin-top: 0px; margin-bottom: 10px; width: 35px; color: #ffffff; text-shadow: 1px 1px 0px #494949;} .lstnrs {font-weight: normal; margin-top: -13px; text-align: center; float: left; margin-left: 5px; width: 35px; color:
#ffffff; text-shadow: 1px 1px 0px #494949;

</style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="http://literecords.com/drop.js"></script> <title>Radio Server is Offline</title>

</head>

<div class="radio-content"> <div class="lst-bg"><img src="off.png" /></div> <div class="header-font">Lite Radio</div> <div class="song-bg">We are down for maintenance.<br />Check back soon!</div> </div> <center><table border="0" cellspacing="0" cellpadding="0" style="display: none;">

</body>

</html>';

}

?>

1 个答案:

答案 0 :(得分：0)

首先尝试纯HTML，假设文件名是song，就像这样

<head>
<style>
.clipper {background-image: url('./albumart/song.jpg');}
</style>
</head><body>

<div class="clipper"></div>
</body>

检查是否适合你，然后尝试（所有这些都在PHP标签内）

   <head>
    <style>
    $file = "song";
    .clipper {background-image: url(\'/albumart/'. $file.'.jpg''\');}
    </style>
    </head><body>

    <div class="clipper"></div>
    </body>

或者你可以做下一个

<body>    
  <div class="clipper">
   <img src="<?php echo '/albumart/'. $file.'.jpg'; ?>">
  </div>
</body>
相关问题
最新问题