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

标签 html css tumblr-themes

<分区>

我是一个完全的代码新手,我正在尝试编辑一个 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;
 }

最佳答案

  • 首先,您的 CSS 有一些错误。
  • 其次,为了实现您想要的效果,您需要使用 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>

关于html - 半透明背景上的不透明文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35413282/

上一篇:html - Wordpress 中的内联元素之间添加了换行符标记,导致布局损坏

下一篇:javascript - jquery 样式在 react 组件中不起作用

相关文章:

html - 如何在 HTML 和 CSS 中将图像设置为按钮?

css - 允许 div 覆盖整个页面而不是容器内的区域

javascript - 从 Tumblr 主题中删除导致 CPU 使用率过高的特定 Javascript 代码

javascript - 将 ul 添加到现有 ul 中的 li 元素

javascript - 从 React 访问 <body>

javascript - jQuery .load 未在 Cocoa WebView 中加载本地 html 文件

html - 如何修复很棒的字体图标上的缩进?

html - 嵌入 flv 文件作为横幅

jquery - 使用 Jquery 调整 Tumblr Post iframe 的大小

html - 在 Tumblr 中分隔帖子