时间戳

首页 > 解决方案 > 尝试在 tumblr 容器主题周围添加边框

html - 尝试在 tumblr 容器主题周围添加边框

问题描述

我正在尝试为 tumblr 主题添加边框，但似乎无法这样做。通常我只是将代码添加border: 5px solid #fff;到主题的容器部分并且它可以工作，但是使用这个它不起作用。

.cont {
    display: block;
    position: absolute;
    top: 0px;
    left:0;
    opacity: 0.6;
    overflow:hidden;
    width:273px;
    height:374px;
    background: url('{image:sidebar bg}') repeat ;
    border-radius:0px;
    opacity:1;
    z-index:9999999999;
    -moz-osx-font-smoothing: grayscale;
}

标签： htmlcssbordertumblr

解决方案

似乎对我有用：https ://jsfiddle.net/lharby/Lanbk1es/

我为正文添加了灰色背景，以便您可以看到边框。

另请注意，这 background: url('{image:sidebar bg}') repeat ;在 jsfiddle 中不起作用，因为这是 tumblr 模板语言的一部分。如果要查看实际图像，则需要完整的 url:https://66.media.tumblr.com/1234.jpg等。

这是完整的CSS：

body {
   // added to show white border on .cont element
   background: #999999;
}

.cont {  
   display: block;
   position: absolute;
   top: 0px;
   left:0;
   opacity: 0.6;
   overflow:hidden;
   width:273px;
   height:374px;
   background: url('{image:sidebar bg}') repeat ; // this won't render in jsfiddle
   border-radius:0px;
   opacity:1;
   z-index:9999999999;
   -moz-osx-font-smoothing: grayscale;
   border: 5px solid #fff; // added border as per the comment above code.

}

此外，您在 css 中将不透明度设置为 0.6，然后将相同元素设置为 1.0，因此 0.6 将被覆盖。

推荐阅读