2

I have an image that when rolled over reveals some lines of text, white on a red background. I would like there to be a break in the strips for each break in the line of text, like the image linked below.

http://imgur.com/ElmaEom

However, all I've gotten to so far, is making the text appear in one single large red block. I would like the text to know where to break if it's too big for 80% of the image, and appear on a new line with a new red strip behind it.

Here's a fiddle of what I have so far.

http://jsfiddle.net/mAU3d/ 

.thumb {
    position: relative;
    float: left;
}

.text, .text-js {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6em;
    line-height: 1.6em;
    display: none;
    position: absolute;
    top: 15px !important;
    left: 0px;
    text-align: left;
    background: #999;
    background-color: #F63146;
    width:80%;
    padding: 1%;
    display: inline;
    color: #FFF;
    text-transform: uppercase;
}

Sorry if the explanation is unclear, thanks in advance for any help.

4

3 回答 3

4

然而，到目前为止，我所做的只是让文本出现在一个大的红色块中。

这就是块元素的呈现方式。（您尝试使用display:inline绝对定位会受到阻碍，它会自动生成一个元素block。）

但是你在h2里面有一个元素div- 所以做那个 inline. 可悲的是，您不能在内联元素中的虚线的所有边上进行填充 - 但如果您只想要背景颜色的效果，您可以使用box-shadow.

.text-js h2 {
    display:inline;
    background: #F63146;
    box-shadow:-5px 0 #F63146, 5px 0 #F63146;
}

http://jsfiddle.net/mAU3d/5/

于 2013-11-05T12:13:30.203 回答
0

我认为没有必要使用任何假框阴影（编辑：框阴影实际上很有用，请参阅评论），您只需要设置文本本身的样式（即使用跨度）而不是包含它的块（这是h2）：http: //jsfiddle.net/mastazi/M6APy/

<h2 class="text"><span class="break">Text should break in to new strips</span></h2>

.break{
    background-color: #F63146;
    line-height: 1.6em;
}
于 2013-11-05T12:22:27.733 回答
0

实现此目的的最简单方法是将h2显示设置为inline。然后从 中删除背景.text-js并将其添加到h2. 我还增加line-height了在行之间添加一些空间。

.text-js h2 {
    display: inline;
    background: #F63146;
    line-height: 1.4em;
}

这是更新的小提琴：http: //jsfiddle.net/mAU3d/10/

于 2013-11-05T12:19:30.310 回答