html中怎么设置body背景图片的透明度,但不影响其他图片与文字

Posted 2023-04-04

html中怎么设置body背景图片的透明度,但不影响其他图片与文字

方法一：把文字放在<div class="bodystyle"> </div>里面，但因为opacity属性会被继承，会导致你的文字也会透明，所以要在文字的CSS样式里面声明opacity:1;把它变得不透明；

方法二：在.bodystyle里面加上z-index:1;然后把你需要的文字放在一个新的div里面
<div style="position:absolute; z-index:2;" > <div>

额外介绍一下z-index属性：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。值越高会放在越前面。这个属性起作用的前提是元素要脱离文档流进行绝对定位，也就是要声明position:absolute; 参考技术A 在背景图片的样式中设置opacity 属性改变透明度 参考技术B bodybackground:#0f0; background-color:transparent;
或者 bodybackground:rgba255,255,255,0

为按钮设置背景和不透明度但不影响其内容

【中文标题】为按钮设置背景和不透明度但不影响其内容

【英文标题】：Setting background & opacity to button but not affecting it's content

【发布时间】：2017-03-11 08:41:23

【问题描述】：

我正在使用 WPF，我想做的是设置按钮的不透明度和背景颜色，但我不想影响按钮内的内容。我尝试了几种方法，但不幸的是没有奏效。

我找到了这种风格，我想应用类似的东西：

这是我的数字键盘：（我正在尝试编辑 BTN 7）：

正如你们所看到的，不幸的是我无法在不影响内部内容的情况下设置按钮的不透明度。

这是我的 XAML 代码（关注 btn 7）：

<StackPanel Height="50" Orientation="Horizontal" Margin="0,0,0,5">
                <Button  FontSize="15" FontWeight="Bold" x:Name="btn7" Foreground="#83D744" Click="btn7_Click" BorderBrush="#83D744" BorderThickness="0.5" Content="7" Width="80" RenderTransformOrigin="0.557,0.693" d:LayoutOverrides="HorizontalAlignment" Background="Black" Opacity="0.2" Margin="0,0,5,0" />
                <Button  FontSize="15" Foreground="Black" FontWeight="Bold" x:Name="btn8" Click="btn8_Click" Content="8" Width="80" Background="#FF50504F" Margin="0,0,5,0"/>
                <Button  FontSize="15" Foreground="Black" FontWeight="Bold" x:Name="btn9" Click="btn9_Click" Content="9" Width="80" d:LayoutOverrides="HorizontalAlignment" Background="#FF50504F"/>
</StackPanel>

那么任何人都可以帮助我请如何解决这个问题.. 谢谢！

【参考方案1】：

为用于背景的画笔添加透明度

黑色的十六进制代码是#000000

更改 alpha 通道以使其半透明 (Background="#50000000") 并删除 Opacity="0.2"

<Button x:Name="btn7"
        FontSize="15" FontWeight="Bold" Foreground="#83D744" 
        Click="btn7_Click" 
        BorderBrush="#83D744" BorderThickness="0.5" 
        Content="7" Width="80" RenderTransformOrigin="0.557,0.693"
        d:LayoutOverrides="HorizontalAlignment" 
        Background="#50000000" Margin="0,0,5,0" />

【讨论】：

你能给我举个例子吗？

据我所知，您添加的唯一内容是 Background="#50000000"，您能稍微解释一下吗？ + 边框厚度 mate 怎么样，你可以看到我设置了 0.5，但这不适用于我的按钮，看起来它的厚度是 2-3px

@billy_56，在您的原始代码 Background="Black" Opacity="0.2" 中。这意味着 Button 将使用 SolidColorBrush（黑色）来呈现自身并且 80%​​ 透明。您可以使用十六进制代码执行完全相同的操作：Background="#000000" Opacity="0.2" 或 Background="#FF000000" Opacity="0.2"。 FF 是 alpha 通道值，你可以减少它来创建透明画笔 (#50000000)。您需要删除 Opacity="0.2" 以保持其他所有内容不透明

@billy_56，关于 BorderThickness：我怀疑此属性未在默认按钮模板中使用

谢谢队友，那么你有什么建议如何用 Border 解决这个问题，我应该打开新问题并给你一个链接..？再次感谢

【参考方案2】：

使按钮的不透明度为 0.2 到 1

【讨论】：

这不是解决方案，我的按钮背景将是 100% 黑色，我想要背景不透明度..

但是您附上的第一张照片有黑色背景。不是吗？