我正在尝试在CSS中添加此博客代码:
data:post.firstImageUrl
但我不知道怎么写。我试过下面的代码,但仍然无法正常工作。
post-image{
background-image: url('data:post.firstImageUrl')
}
任何人都可以帮我解决这个问题吗?
答案 0 :(得分:0)
不幸的是,你不能这样做
但是在博客中,你总是可以使用javascript来做那样的事情
首先,您应该获取第一张图片的ID 然后在javascript中获取图片网址并在javascript中编辑css
//Getting the image url of the first image
var firstimagesrc = document.getElementById("FirstImage").src;
document.getElementsByClassName("post-image")[0].style.backgroundImage = "url(" + firstimagesrc + ")";
.post-image {
width: 200px;
height: 200px;
background-color: #000000;
background-position:center;
background-size:200px 200px;
}
<!--Let's imagine that this is the first image-->
<img src="https://i.imgur.com/aKnJrwx.jpg" width="100px" id="FirstImage" />
<div class="post-image"></div>
答案 1 :(得分:0)
只需确保在文字<style>
标记内编写CSS代码:
<b:loop values='data:posts' var='post'>
...
<div expr:class='"post-image-" + data:post.id'/>
<style media='screen'>
.post-image-<data:post.id/> {
background-image: url('<data:post.firstImageUrl/>');
}
</style>
...
</b:loop>
答案 2 :(得分:-1)
如果我理解正确的话,试试这个:
post-image {
background:
url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
no-repeat
left center;
padding: 5px 0 5px 25px;
}
实际格式:
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
我现在正在打电话,我会在笔记本电脑上修改并添加更多内容。
有关Data URls
:Migrating data when changing an NDB field's property type