如何在CSS中添加Blogger <data:>标签?

时间:2015-08-15 13:24:29

标签: html css blogger

我正在尝试在CSS中添加此博客代码:

data:post.firstImageUrl

但我不知道怎么写。我试过下面的代码,但仍然无法正常工作。

post-image{
    background-image: url(&#39;data:post.firstImageUrl&#39;)
}

任何人都可以帮我解决这个问题吗?

3 个答案:

答案 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 URlsMigrating data when changing an NDB field's property type

的更多研究