Question

您好我正在制作一个由其他开发人员制作的WordPress主题，但没有留下任何笔记或文档。我目前正在根据新要求编辑主题。我不是一个好的css家伙，我主要在事情的后端工作。所以我需要一个像这样的div框或框：

那个半透明的黑盒子是我需要的和内部文字：

我设法制作这样的东西：

但似乎我的盒子很高，我可以在中心吗？另外内容应该是白色字体。到目前为止，这是我的代码：

<div class="about_area" id="about">
<div class="container">
    <div class="row">
        <div class="col-md-12 sec_headding text-center">
            <!-- <h1>
                <span></span><?php the_title(); ?><span></span>
            </h1> -->
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-12 aboutbox">
                <div class="about_content">
                    <h3 class="about_header">RED DELA CRUZ</h3>
                    <hr align="center"/>
                    <p class="lead"><?php the_field('subtitle'); ?></p>

                    <p><?php the_content(); ?></p>
                </div>
            </div>

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

您在框中看到的内容由

生成

<?php the_field('subtitle'); ?>

我的CSS

.bxslider img{
    width:100%;
}
.about_area{
    padding-bottom:105px;
    background-color: #b0c4de;
    background-image: url('../images/about_bg.jpg');
}

.about_area .bx-wrapper .bx-viewport{
    margin-bottom: 20px;
}

.aboutbox {
    background-color: #000000;
    opacity: 0.6;
    position: relative;

}

.about_content {
    color: #FFFFFF;
}

.about_header {
    text-align: center;
    font-size: 33px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #FFFFFF;
    margin: 1em 0;
    padding: 0;
    /*width: 820px;*/
    width: 60%;
    margin: 0 auto;
}

Answer 1

我认为您的意思是“如何将div水平居中”，您会在上一个问题上找到大量解决方案：How to horizontally center a <div> in another <div>?

如果我错了，你的意思是别的，请告诉我。

Answer 2

你可以尝试这个：

bxslider img{
    width:100%;
}
.about_area{
    padding-bottom:105px;
    background-color: #b0c4de;
    background-image: url('http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png');
}

.about_area .bx-wrapper .bx-viewport{
    margin-bottom: 20px;
}

.aboutbox {
    background-color: #000000;
    opacity: 0.6;
    position: relative;

}

.about_content {
    color: #FFFFFF;
}

.about_header {
    text-align: center;
    font-size: 33px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #FFFFFF;
    margin: 1em 0;
    padding: 0;
    /*width: 820px;*/
    width: 60%;
    margin: 0 auto;
}

#one, #two, #three { width: 33.3%; }
#one, #two { float: left; }
#three { float: right; clear: none; }

#one,  #three {
width: 250px;
min-height: 150px;
margin-top:-73px;
border: 4px solid gold;
background:red;
/*to reduce float drop issues in IE*/
word-wrap: break-word;

}
 #two {
     margin-top:-35px;
width: 150px;
min-height: 50px;
margin-bottom:45px;
border: 4px solid gold;
background:#C2DAD7;
/*to reduce float drop issues in IE*/
word-wrap: break-word;
     margin-left:420px;
     position:fixed;
}
p{
     margin-top:-175px;
    position:fixed;
}

Fiddle Demo

Answer 3

要使框背景透明而不是文本，请将.aboutbox类更改为：

let aManager = Manager.sharedInstance
    aManager.request(.GET, URLStrings.BASE_URL + URLStrings.CATEGORIES )
        .response {
            (request, response, data, error) in
            if let response = response {
                print("GET REQUEST: \(request?.description)")
                print("GET REQUEST: \(response.statusCode)")
                if response.statusCode == 200 || response.statusCode == 201 {
               }
           }
           else {
           }
       }

然后我在盒子的顶部添加了一个边距，让女性面孔免于盒子。

CSS Div Box WordPress主题

3 个答案: