是否可以在CSS中将元素的::before内容设置为作为数据属性传递的url ?
例如，如果我有一堆推荐和推荐头像，我试着把它们传递给CSS，像这样:
PHP/HTML:
$image_src = wp_get_attachment_image_src($image)[0];
echo '
<div class="testimonial fp-card content-section content-section--has-center-image" data-image="' . $image_src . '">
<div class="testimonial__text">' . $text . '</div>
</div>';
SCSS:
.testimonial {
&::before {
content: attr(data-image); // This outputs the string URL. How can I use the string URL as an actual URL?
position: absolute;
top: -0.5rem;
right: 50%;
transform: translateX(-50%);
// Etc
}
}
是否有一种方法将url从data-image属性传递到::before内容作为有效的url ?
我尝试了content: url(attr(data-image))，但那不起作用。
您可以使用CSS变量来实现此目的。
你需要在CSS中定义一个变量，并通过内联样式为它分配一个值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<style>
.box {
--avatar-url: "";
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
background: var(--avatar-url);
}
.box::before {
content: "";
position: absolute;
width: 150px;
height: 150px;
top: 0;
left: 200px;
border-radius: 50%;
background: var(--avatar-url);
}
</style>
<div class="box" style="--avatar-url: url('https://via.placeholder.com/150');"></div>
</body>
</html>