通过 PHP 传递 CSS 背景图像值

Question

我在 html 中有这个 div

<div class="overlap">

    <img src="images/somepicture.jpg" alt="IMG-PRODUCT">

</div>

这是我的CSS

.overlap{

    position: relative;

    background-color: blue;

}

.overlap:after{

    content: "";

    -webkit-transition: transform 0.9s ease;

    -o-transition: transform 0.9s ease;

    -moz-transition: transform 0.9s ease;

    transition: transform 0.9s ease;

    background-image: url('../images/anotherPicture.png');

    background-repeat: no-repeat;

    background-size: 100% 100%;

    display: inline-block;

    position: absolute;

    width: 36%;

    height: 40%;

    top:23%;

    left: 34%;

}

.overlap:hover:after{

    -webkit-transform: scale(1.2);

    -moz-transform: scale(1.2);

    -ms-transform: scale(1.2);

    -o-transform: scale(1.2);

    transform: scale(1.2);

}

我需要在.overlap:after{图像中background-image: url(使用来自 php 变量的值进行更改，如下所示：

background-image: url('../images/$imageName.png');

Answer 1

将您的 css 文件扩展名更改为.php$imageName ，然后确保在加载 css 之前指定一个值。对于下面的示例，假设文件是 style.php；<?php&nbsp;&nbsp; &nbsp;$imageName = "image1.png";?><link rel="stylesheet" type="text/css" href="style.php">然后在您的style.php中，header("Content-type: text/css");在顶部包含并使用 php 变量修改您的样式；background-image: url('../images/<?=$imageName;?>');<?php&nbsp; &nbsp;header("Content-type: text/css");?>.overlap{&nbsp; &nbsp; position: relative;&nbsp; &nbsp; background-color: blue;}.overlap:after{&nbsp; &nbsp; content: "";&nbsp; &nbsp; -webkit-transition: transform 0.9s ease;&nbsp; &nbsp; -o-transition: transform 0.9s ease;&nbsp; &nbsp; -moz-transition: transform 0.9s ease;&nbsp; &nbsp; transition: transform 0.9s ease;&nbsp; &nbsp; background-image: url('../images/<?=$imageName;?>');&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; background-size: 100% 100%;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width: 36%;&nbsp; &nbsp; height: 40%;&nbsp; &nbsp; top:23%;&nbsp; &nbsp; left: 34%;}.overlap:hover:after{&nbsp; &nbsp; -webkit-transform: scale(1.2);&nbsp; &nbsp; -moz-transform: scale(1.2);&nbsp; &nbsp; -ms-transform: scale(1.2);&nbsp; &nbsp; -o-transform: scale(1.2);&nbsp; &nbsp; transform: scale(1.2);}如果.overlap在循环中，它会变得很棘手，首先你必须在链接你的 CSS 之前添加你的查询。<?php&nbsp;&nbsp; &nbsp;// for example this is your query&nbsp; &nbsp;$con = "";&nbsp; &nbsp;$sql = "SELECT Lastname, Age FROM Persons ORDER BY Lastname";&nbsp; &nbsp;$result = mysqli_query($con, $sql);?><link rel="stylesheet" type="text/css" href="style.php">然后在 style.php 中，我们分离.overlap了哪些使用了除背景图像之外的通用 CSS，并使用了一个新类.overLapCount，我们将在 .php 的循环中使用该类$result。<?php&nbsp; &nbsp;header("Content-type: text/css");?>.overlap{&nbsp; &nbsp; position: relative;&nbsp; &nbsp; background-color: blue;}.overlap{&nbsp; &nbsp;content: '';&nbsp; &nbsp;-webkit-transition: transform 0.9s ease;&nbsp; &nbsp;-o-transition: transform 0.9s ease;&nbsp; &nbsp;-moz-transition: transform 0.9s ease;&nbsp; &nbsp;transition: transform 0.9s ease;&nbsp; &nbsp;background-repeat: no-repeat;&nbsp; &nbsp;background-size: 100% 100%;&nbsp; &nbsp;display: inline-block;&nbsp; &nbsp;position: absolute;&nbsp; &nbsp;width: 36%;&nbsp; &nbsp;height: 40%;&nbsp; &nbsp;top:23%;&nbsp; &nbsp;left: 34%;}<?php&nbsp; &nbsp;// create a counter variable which we will use to create a class;&nbsp; &nbsp;// overlapCount1, overlapCount2, overlapCount3, and so on...&nbsp; &nbsp;$count = 0;&nbsp; &nbsp;while ($row = mysqli_fetch_assoc($result))&nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; // access the image inside row&nbsp; &nbsp; &nbsp; $imageName = $row['image'];&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; // echo the css, see $count and $imageName&nbsp; &nbsp; &nbsp; // be careful with quotation marks&nbsp; &nbsp; &nbsp; echo "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.overlap.overlapCount"+$count+":after&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: url('../images/"+$imageName+"');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; ";&nbsp; &nbsp; &nbsp; // increment&nbsp; &nbsp; &nbsp; $count++;&nbsp; &nbsp;}?>.overlap:hover:after{&nbsp; &nbsp; -webkit-transform: scale(1.2);&nbsp; &nbsp; -moz-transform: scale(1.2);&nbsp; &nbsp; -ms-transform: scale(1.2);&nbsp; &nbsp; -o-transform: scale(1.2);&nbsp; &nbsp; transform: scale(1.2);}然后在您的 php/html 中，在循环期间，在递增时使用该类。<?php&nbsp; &nbsp;$count = 0;&nbsp; &nbsp;while ($row = mysqli_fetch_assoc($result))&nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; echo "<div class='overlap overlapCount"+$count+"'></div>";&nbsp; &nbsp;}&nbsp; &nbsp;$count++;?>

Answer 2

您可以在 .php 文件中声明您的 html，并且您需要在 .php 页面中将 css 作为内部样式表提及，您的 .php 文件应该是这样的<html><head><style>.overlap{&nbsp; &nbsp; position: relative;&nbsp; &nbsp; background-color: blue;}.overlap:after{&nbsp; &nbsp; content: "";&nbsp; &nbsp; -webkit-transition: transform 0.9s ease;&nbsp; &nbsp; -o-transition: transform 0.9s ease;&nbsp; &nbsp; -moz-transition: transform 0.9s ease;&nbsp; &nbsp; transition: transform 0.9s ease;&nbsp; &nbsp; background-image: url('../images/<?php echo $imagename; ?>');&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; background-size: 100% 100%;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width: 36%;&nbsp; &nbsp; height: 40%;&nbsp; &nbsp; top:23%;&nbsp; &nbsp; left: 34%;}.overlap:hover:after{&nbsp; &nbsp; -webkit-transform: scale(1.2);&nbsp; &nbsp; -moz-transform: scale(1.2);&nbsp; &nbsp; -ms-transform: scale(1.2);&nbsp; &nbsp; -o-transform: scale(1.2);&nbsp; &nbsp; transform: scale(1.2);}</style></head><body><div class="overlap">&nbsp; &nbsp; <img src="images/somepicture.jpg" alt="IMG-PRODUCT"></div></body></html>