如何添加Blogger CSS里面的标签？

Question

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

data:post.firstImageUrl

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

post-image{
    background-image: url('data:post.firstImageUrl')
}

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

Answer 1

不幸的是，你不能通过这种方式做到这一点

但是在博客中，你总是可以使用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>

Answer 2

只需确保在文字<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>

Answer 3

如果我理解正确，试试这个：

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的更多研究：CSS Tricks