用CSS缩小div的背景色
用CSS缩小div的背景色
提问于 2020-12-22 18:08:13
在下面的图片中，我有以下CSS来生成文本“从9-5分支”后面的透明灰色框：
.page-id-5 .col-md-8{
background: rgb(70, 70, 70); /* Fallback for older browsers without RGBA-support */
background: rgba(70, 70, 70, 0.3);
padding-top: 25px;
padding-bottom: 10px;
}但盒子太宽了。我试过用“宽度”来使它变窄，但它把整个设计搞砸了。如何在不更改文本的情况下调整背景框的宽度？这里的实例：https://goprune.com
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-12-22 18:38:23
尝试添加以下内容：
.page-id-5 .col-md-8{
background: rgb(70, 70, 70); /* Fallback for older browsers without RGBA-support */
background: rgba(70, 70, 70, 0.3);
padding-top: 25px;
padding-bottom: 10px;
width: auto !important; /* Add */
margin-left: 0 !important; /* add */
}并增加：
.page-id-5 .top-parallax-section{
display: flex;
justify-content: center;
}我直接在你的网站上，通过密码检查员.所以应该行得通。
有一个自动宽度到该div将修复额外的填充。flex将正确地将div对中。
!important;将确保覆盖引导规则。;)
Stack Overflow用户
发布于 2020-12-22 18:23:35
在您的情况下，将样式更改为
.page-id-5 .col-md-8{
background: rgb(70, 70, 70); /* Fallback for older browsers without RGBA-support */
background: rgba(70, 70, 70, 0.3);
padding-top: 25px;
padding-bottom: 10px;
width: auto; /* have space based on text */
margin: 0 auto; /* center div */
display: table; /* to overlap the current displaying options provided by parents*/
float: none; /* ignore float option */
}Stack Overflow用户
发布于 2020-12-22 18:54:04
您使用的wordpress主题似乎使用了一些过时的代码。
您可能不能简单地更改.page-id-5 .col-md-8，因为它看起来是一个相当普通的className，因此我建议下面这个看起来更可靠的className。
- 第一部分是设置框。确保您可以方便地将标题栏、bot水平地居中，因为vertically.
- The第二部分是利用所提供的框并覆盖可能会妨碍您的代码。
- 最后一部分确保您可以改进布局。
代码的一个独特部分是.top-parallax-section。所以你能用的是：
.small-screen .top-parallax-section {
display: flex;
padding: 0;
height: 336px;
justify-content: center;
align-items: center;
}
.top-parallax-section .text-center {
background: rgba(70, 70, 70, 0.3);
float: none;
margin: 0;
padding: 20px;
width: auto;
}
.top-parallax-section .mb32 p,
.top-parallax-section .mb32 {
margin: 0
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65413701
复制相关文章
相似问题
腾讯云开发者
