[通过PHP传递CSS背景图像值

问题描述 投票:1回答:2

我在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');
php html css
2个回答
1
投票

您可以在.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
投票

将css的文件扩展名更改为。php,然后确保在加载css之前为$imageName指定一个值。对于下面的示例,假设文件为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,将在$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++; ?>

热门问题
推荐问题
最新问题