gpt4 book ai didi

css - 跨越背景颜色和填充问题

转载 作者:技术小花猫 更新时间:2023-10-29 10:29:52 25 4
gpt4 key购买 nike

我有一个我想实现的设计,其中涉及在图像上显示带有自己背景颜色的标题文本,并用 10 像素填充,例如:

http://i.stack.imgur.com/E7EpS.png

这张图片中的第一个例子效果很好,而且很简单:

.greenbox {width:520px; height:261px; position:relative;}
.greenbox span { padding:0 10px; background:#000; position:absolute; left:0; bottom:40px; }

当文本溢出到另一行时会出现问题,然后 span 元素填充不会影响换行符上的文本,它呈现如下:

http://i.stack.imgur.com/pY18f.png

任何人都知道替代方案,或者他们将如何设置此设计以使背景颜色和填充保持一致?

提前致谢

编辑:我简化了代码以使其简洁,但遗漏了一个重要部分。其实是这样的:

.greenbox {width:520px; height:261px; position:relative;}
.greenbox a {position:absolute; left:0; bottom:40px; }
.greenbox span { padding:0 10px; background:#000; }

使用 html 作为:

<div class="greenbox">

<a href="link"><span>The Title Goes Here</span></a>

</div>

因此 span 保持内联,包裹在绝对位置 anchor 中。

最佳答案

我之前处理过类似的问题:Add padding at the beginning and end of each line of text

我已经从我自己那里抢走了那个解决方案,并将其适合您的情况。

请注意,line-heightpadding 调整可能非常棘手才能正确完成。

参见: http://jsbin.com/ahoyug

HTML:

<div class="greenbox">
<a href="#"><span><span>
The Title Goes Here, with overflow
</span></span></a>
</div>

CSS:

.greenbox {width:500px; height:200px; position:relative; background:green}

.greenbox > a {
font: 50px sans-serif;
line-height: 1.14;
padding: 0;
border-left: 20px solid #000;
position: absolute;
left: 0;
bottom: 60px;
text-decoration: none;
color: #fff
}
.greenbox > a > span {
background: #000
}
.greenbox > a > span > span {
position: relative;
left: -10px
}

关于css - 跨越背景颜色和填充问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7105650/

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