gpt4 book ai didi

css - 仅更改外部 div 而不是其元素的不透明度

转载 作者:行者123 更新时间:2023-11-28 15:48:55 26 4
gpt4 key购买 nike

<分区>

我正在练习我的 bootstrap 技能并创建了一个示例模板。所以我在我的一行中所做的是添加一个 CSS 代码来降低它的不透明度。结果如下图所示。

sample

但是,如您所见,div 元素的不透明度也发生了变化。图像位于使用媒体类的 div 中,其旁边的 div 使用媒体正文类,并且仅包含标题和段落。没什么特别的。这是它的代码。

 <div class="row row-content">
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img src="img/alcazar.png" class="media-object img-thumbnail" alt="alcazar">
</a>
</div>
<div class="media-body">
<div class="media-heading"><h3>Alcazar Park</h3></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p>
</div>

</div>
</div>
</div>

在开头,您会看到 row-content 类,它在 CSS 中用作:

.row-content {
background-color: #000 !important;
color: #fff;
opacity: 0.5;
margin:0px auto;
padding: 50px 0px 50px 0px;
min-height:200px;
}

那么如何增加图片、标题和段落的不透明度呢?我认为这有点棘手。

谢谢,

西奥。

编辑

这是 jsfiddle代码试一试。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com