半透明背景上的不透明文本

Question

我是一个完全的代码新手，我正在尝试编辑一个 tumblr 主题。我一直在网上搜索教程，但我无法解决这个问题。我想通过添加 opacity: #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;
 }

Answer 1

首先你的 CSS 有一些错误。
其次，为了实现您想要的效果，您需要在 background 中使用 RGBA。

为什么需要使用 rgba？

根据MDN

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

片段

body {
  background: rgba(0, 0, 0, 0.5) /* background black with 50% opacity */
}

<div>This will be opaque</div>

半透明背景上的不透明文本

Opaque text over semi-transparent background

html

css

tumblr-themes

片段