gpt4 book ai didi

javascript - 将换行符添加到图像上绝对定位的文本 block 以创建文本 strip

转载 作者:行者123 更新时间:2023-11-29 18:19:52 25 4
gpt4 key购买 nike

我有一张图片,滚动时会显示一些文本行,红底白字。我希望文本行中的每个中断都在 strip 中中断,如下面链接的图像。

http://imgur.com/ElmaEom

但是,到目前为止,我所做的只是让文本出现在一个大的红色 block 中。如果文本对于图像的 80% 来说太大了,我希望文本知道在哪里中断,并出现在一个新行上,后面有一个新的红色 strip 。

这是我目前所拥有的一些 fiddle 。

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;
}

抱歉,如果解释不清楚,请提前感谢您的帮助。

最佳答案

However, all I've gotten to so far, is making the text appear in one single large red block.

这就是 block 元素的渲染方式。 (您尝试使用 display:inline 会因使用绝对定位而受阻,这会自动使元素 block。)

但您在 div 中有一个 h2 元素 – 所以让 that inline。可悲的是,您无法在内联元素中的虚线的所有边上进行填充——但如果您只是想要背景色效果,您可以使用 box-shadow 来伪造它。

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

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

关于javascript - 将换行符添加到图像上绝对定位的文本 block 以创建文本 strip ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19788319/

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