winform中如何使groupbox背景透明？

Posted 2023-05-17

我在form中添加了背景图片，但是发现groupbox始终是有原来form的背景的，这样显得非常丑。我也搜了一下以前的答案，说是设置什么transparenkey，但是完全不行。等等，都不行。还有什么好办法吗~~~~帮帮忙啊
~~感激不尽~~~急~~~~~~~~

参考技术A 点到groupbox控件的属性
找到BackColor 点开 选择web选项 选择Transparent属性就可以了
你试一下

如何在响应式方形网格中仅使背景图像透明？

【中文标题】如何在响应式方形网格中仅使背景图像透明？

【英文标题】：How to make only background image transparent in responsive square grid?

【发布时间】：2015-01-21 04:34:25

【问题描述】：

使用web-tiki's responsive square grid lay-out's，我制作了一些带有背景图像和文字的响应方块，如下所示：

HTML：

<div class="square bg imgautumn1">
   <div class="content">
        <div class="table">
            <div class="table-cell months">
                VISIBLE TEXT
            </div>
        </div>
    </div>
</div>

CSS：

.square 
    float: left;
    position: relative;
    margin: 0.25%;
    width: 50%;
    padding-bottom : 50%; /* = width for a 1:1 aspect ratio */
    background-color: #1E1E1E;
    overflow: hidden;

.content 
    position: absolute;
    height: 90%; /* = 100% - 2*5% padding */
    width: 90%; /* = 100% - 2*5% padding */
    padding: 5%;

.table 
    display: table;
    width: 100%;
    height: 100%;

.table-cell 
    display: table-cell;
    vertical-align: middle;

.months 
    font-size: 40px;
    font-weight: 900;

.imgautumn1:before 
    background-color: black;

/*  For responsive images as background */
.bg:before 
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
    content:'';
    position:absolute;
    top:0;left:0;
    right:0;bottom:0;

.bgcolor: #fff;

/*CHANGE OPACITY ON HOVER*/
.bg:hover:beforeopacity:0.2;

现在我试图只使背景透明，而不是文本。

在imgautumn1 CSS 类上使用opacity: 0.3 属性时，图像变得透明，其中的文本也变得透明。其他技术，如来自this SO-answer 的技术使用单独的 div 作为背景，或者使用来自here 的:after 元素作为背景加上不透明度的技术使背景的定位出错（即，图像不是居中），我发现很难实施。另一种可能性可能是在图像顶部放置一个透明的 div 方块，但我认为 background-image 属性是不可能的。

我希望这里有人可以为我提供一些关于如何只使背景透明而不是文本透明的帮助。

JSFiddle：http://jsfiddle.net/L7m5psrm/

【问题讨论】：

***.com/questions/10422949/css-background-opacity 的副本。正如一个获得 200 人赞成的公认答案所说，你不能那样做。

【参考方案1】：

如果您使用:after/:before 解决方案似乎可以正常工作（将图像设置为背景）

您只需要确保应用相同的background 属性。

.imgautumn1:before 
    background-image: url('https://raw.githubusercontent.com/erooijak/zaaikalender/master/Zk/Content/Images/Autumn/1.jpg');

/*  For responsive images as background */
.bg:before 
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
    content:'';
    position:absolute;
    top:0;left:0;
    right:0;bottom:0;

http://jsfiddle.net/L7m5psrm/2/的演示

【讨论】：

啊哈，我当时做得不对。谢谢！ :-) */edit*/ 我看不到在哪里放置opacity: 0.3 元素？将.imgautumn1 类更改为imgautumn1:before 会使图像消失。

@user2609980 您还需要将.bg 更改为.bg:before。并像您一样为颜色保留.bgcolor:#fff。不透明度必须应用于这个新创建的:before 元素。更新后的小提琴通过:hover 规则显示了这一点，但如果您希望它始终具有opacity:0.2，您可以直接将其应用于.bg:before

啊等一下，我再玩一下，我现在才在 Fiddle 中看到 `.bg:hover:beforeopacity:0.2;`！非常感谢您的帮助！

太棒了。它就像一个魅力！ top:0;left:0; right:0;bottom:0; 有什么用处？

我们的想法是我们创建一个带有:before 的伪元素，其中包含图像但可以自主控制。然后我们使用position:absolute 将其从流中移除，这样它就不会影响其容器的大小等。left/top/right/bottom 是定位这个新元素以覆盖整个.bg 元素。它设置有效的:before 元素的尺寸。