Question

我确定这一定非常简单，但我遇到了问题！

我想要的效果是每页上横幅或标题的纯色块，其中包含一些文字。但是为了增加一些装饰，我已经为每一面做了一个小图形，这只是一个从横幅颜色渐变为白色的小方块。所以整体效果是一个很好的颜色条带，结束渐变。我希望你明白这一点。

这是我的代码：

<div class="mini_banner_l"></div>
<div class="mini_banner">Hey '.$member_name.', your account is not activated yet !</div>
<div class="mini_banner_r"></div>

到目前为止我的css工作：

.mini_banner_l {
background: no-repeat url(../gfx/frills/infobar_end_l.png);
display:inline-block;
}

.mini_banner_r {
background: no-repeat url(../gfx/frills/infobar_end_r.png);
display:inline-block;
}

.mini_banner {
background: #57a7b5;
display:inline-block;
}

CSS从来都不是我的强项，也许有更好的方法来实现这种效果（？）但我的问题是在页面上没有任何东西出现在褪色的末端应该是，但它们显示为我立即添加一些文字，例如：

<div class="mini_banner_l">now it shows</div>
<div class="mini_banner">Hey '.$member_name.', your account is not activated yet !</div>
<div class="mini_banner_r"></div>

关于如何使其发挥作用的任何想法，或更好的方式来做到这一点非常感激：D 谢谢！

Answer 1

只需在下面的css中添加宽度和高度，然后更改宽度和宽度。高度与宽度和宽度图形的高度。

.mini_banner_l {
background: no-repeat url(../gfx/frills/infobar_end_l.png);
width:100px;
height:100px;
display:inline-block;
}

.mini_banner_r {
background: no-repeat url(../gfx/frills/infobar_end_r.png);
width:100px;
height:100px;
display:inline-block;
}

.mini_banner {
background: #57a7b5;
display:inline-block;
}

基本的CSS横幅

1 个答案: