我在 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');
2 回答
慕无忌1623718
TA贡献1744条经验 获得超4个赞
将您的 css 文件扩展名更改为.php$imageName ，然后确保在加载 css 之前指定一个值。对于下面的示例，假设文件是 style.php；
<?php
$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
header("Content-type: text/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/<?=$imageName;?>');
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在循环中，它会变得很棘手，首先你必须在链接你的 CSS 之前添加你的查询。
<?php
// for example this is your query
$con = "";
$sql = "SELECT Lastname, Age FROM Persons ORDER BY Lastname";
$result = mysqli_query($con, $sql);
?>
<link rel="stylesheet" type="text/css" href="style.php">
然后在 style.php 中，我们分离.overlap了哪些使用了除背景图像之外的通用 CSS，并使用了一个新类.overLapCount，我们将在 .php 的循环中使用该类$result。
<?php
header("Content-type: text/css");
?>
.overlap{
position: relative;
background-color: blue;
}
.overlap{
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-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
position: absolute;
width: 36%;
height: 40%;
top:23%;
left: 34%;
}
<?php
// create a counter variable which we will use to create a class;
// overlapCount1, overlapCount2, overlapCount3, and so on...
$count = 0;
while ($row = mysqli_fetch_assoc($result))
{
// access the image inside row
$imageName = $row['image'];
// echo the css, see $count and $imageName
// be careful with quotation marks
echo "
.overlap.overlapCount"+$count+":after
{
background-image: url('../images/"+$imageName+"');
}
";
// increment
$count++;
}
?>
.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);
}
然后在您的 php/html 中，在循环期间，在递增时使用该类。
<?php
$count = 0;
while ($row = mysqli_fetch_assoc($result))
{
echo "<div class='overlap overlapCount"+$count+"'></div>";
}
$count++;
?>
绝地无双
TA贡献1946条经验 获得超4个赞
您可以在 .php 文件中声明您的 html，并且您需要在 .php 页面中将 css 作为内部样式表提及，您的 .php 文件应该是这样的
<html>
<head>
<style>
.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/<?php echo $imagename; ?>');
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);
}
</style>
</head>
<body>
<div class="overlap">
<img src="images/somepicture.jpg" alt="IMG-PRODUCT">
</div>
</body>
</html>
- 2 回答
- 0 关注
- 102 浏览
添加回答
举报
0/150
提交
取消