0

我是一个编码新手，我正在尝试编辑一个 tumblr 主题。我一直在网上寻找教程，但我无法解决这个问题。我希望通过添加不透明度来获得透明的内容背景：#background { background:{color:Content Background}; margin: 0 auto; width: 730px; **opacity: 0.5;** }但我希望文本保持不透明。请问我该怎么做？

这是我所拥有的：

 body {
   margin: 0 auto;
   width: 100%;
   height: 100%;
   background: {
     color: Background
   }
   url('{image:Background}');
   background-repeat:no-repeat;
   background-position:center;
   background-attachment:fixed;
   color: {
     color: Primary colour
   }
   ;
   font-family: {
     font: Body
   }
   ,
   Baskerville,
   Times,
   "Times New Roman",
   serif;
   font-weight:300;
   font-size:13px;
   line-height:24px;
 }
 #background {
   background: {
     color: Content Background
   }
   ;
   margin:0 auto;
   width:730px;
   opacity:0.5;
 }
 #background-inner {
   margin: 0 auto;
   background: {
     color: Content Background
   }
   ;
   border-left:15px solid;
   {
     color: Stripe
   }
   ;
   border-right:15px solid {
     color: Stripe
   }
   ;
   width:670px;
 }
 section#blog {
   margin: 0 auto;
   width: 670px;
 }
4

1 回答 1

3
  • 首先，您的 CSS 有一些错误。
  • 其次，为了实现你想要的，你需要在background.

为什么需要使用rgba？

根据MDN

该值适用于整个元素，包括其内容，即使该值不被子元素继承。因此，一个元素及其包含的子元素都具有相对于元素背景的相同不透明度，即使该元素及其子元素相对于彼此具有不同的不透明度。

片段

body {
  background: rgba(0, 0, 0, 0.5) /* background black with 50% opacity */
}
<div>This will be opaque</div>

于 2016-02-15T15:41:02.880 回答