43

我正在尝试为拥有博客的客户做这样的事情。

http://i.stack.imgur.com/4h31s.png

她想要一个半透明的边框。我知道将其作为背景是可能的。但我似乎找不到这种用于横幅的 css 技术背后的逻辑/代码。有人知道怎么做这个吗？这会很有帮助，因为这是我的客户想要为他的博客实现的外观......

4

4 回答 4

80

好吧，如果您想要完全透明，则可以使用

border: 5px solid transparent;

如果您的意思是不透明/透明，则可以使用

border: 5px solid rgba(255, 255, 255, .5);

在这里，a表示 alpha，您可以缩放，0-1。

还有一些人可能会建议您使用opacitywhich 也可以完成相同的工作，唯一的区别是它也会导致子元素变得不透明，是的，有一些解决方法，但rgba似乎比使用opacity.

对于较旧的浏览器，始终使用#(hex) 声明背景颜色作为后备，这样如果旧浏览器无法识别rgba，它们会将hex颜色应用于您的元素。

演示

演示 2（带有嵌套 div 的背景图像）

演示 3（使用img标签而不是background-image）

body {
    background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);   
}

div.wrap {
    border: 5px solid #fff; /* Fall back, not used in fiddle */
    border: 5px solid rgba(255, 255, 255, .5);
    height: 400px;
    width: 400px;
    margin: 50px;
    border-radius: 50%;
}

div.inner {
    background: #fff; /* Fall back, not used in fiddle */
    background: rgba(255, 255, 255, .5);
    height: 380px;
    width: 380px;
    border-radius: 50%; 
    margin: auto; /* Horizontal Center */
    margin-top: 10px; /* Vertical Center ... Yea I know, that's 
                         manually calculated*/
}

注意（对于演示 3）：图像将根据提供的高度和宽度进行缩放，因此请确保它不会破坏缩放比例。

于 2013-07-19T16:31:21.697 回答
13

您也可以使用border-style: doublewith background-clip: padding-box，而不使用任何额外的（伪）元素。它可能是最紧凑的解决方案，但不如其他解决方案灵活。

例如：

<div class="circle">Some text goes here...</div>

.circle{
    width: 100px;
    height: 100px;
    padding: 50px;
    border-radius: 200px;
    border: double 15px rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.7);
    background-clip: padding-box;
}

结果

如果您仔细观察，您会发现边框和背景之间的边缘并不完美。这似乎是当前浏览器中的一个问题。但是当边框很小时，它并不那么明显。

于 2013-08-02T10:31:02.617 回答
10

使用:before伪元素、CSS3
和 一些透明度非常容易：border-radius

现场演示

在此处输入图像描述

<div class="circle"></div>

CSS：

.circle, .circle:before{
  position:absolute;
  border-radius:150px;  
}
.circle{  
  width:200px;
  height:200px;
  z-index:0;
  margin:11%;
  padding:40px;
  background: hsla(0, 100%, 100%, 0.6);   
}
.circle:before{
  content:'';
  display:block;
  z-index:-1;  
  width:200px;
  height:200px;

  padding:44px;
  border: 6px solid hsla(0, 100%, 100%, 0.6);
  /* 4px more padding + 6px border = 10 so... */  
  top:-10px;
  left:-10px; 
}

:before附加到我们的另一个.circle元素，您只需要使（ok、block、absolute 等）透明并使用边框 opacity。

于 2013-07-19T18:14:54.340 回答
2

使用rgba（rgb with alpha transparency）：

border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity

alpha transparency0（0% 不透明度 = 100% 透明）和 1（100 不透明度 = 0% 透明）之间的变量

于 2013-07-19T16:40:02.343 回答