如何添加Blogger <data:> 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技巧