[英]How to add Blogger <data:> tags inside CSS?
我正在尝试在CSS中添加此博客代码:
data:post.firstImageUrl
但我不知道怎么写。 我试过下面的代码,但仍然无法正常工作。
post-image{
background-image: url('data:post.firstImageUrl')
}
任何人都可以帮我解决这个问题吗?
不幸的是,你不能通过这种方式做到这一点
但是在博客中,你总是可以使用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>
只需确保在文字<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>
如果我理解正确,试试这个:
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技巧
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.