Question

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

data:post.firstImageUrl

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

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

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

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：Migrating data when changing an NDB field's property type

的更多研究

如何在CSS中添加Blogger <data：>标签？

3 个答案: