CSS 跨背景颜色和填充问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7105650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
span background-color & padding problems
提问by Michael Watson
I have a design I want to implement that involves title text appearing with its own background color, padded by 10px, over an image, par example:
我有一个我想要实现的设计，它涉及标题文本，它带有自己的背景颜色，填充 10px，在图像上，标准示例：
http://i.stack.imgur.com/E7EpS.png
http://i.stack.imgur.com/E7EpS.png
The first example in this picture works well, and is simple:
这张图片中的第一个例子效果很好，而且很简单：
.greenbox {width:520px; height:261px; position:relative;}
.greenbox span { padding:0 10px; background:#000; position:absolute; left:0; bottom:40px; }
Trouble arises when the text overflows onto another line, then the span elements padding does not effect the text on the line breaks, it renders like so:
当文本溢出到另一行时会出现问题，然后 span 元素填充不会影响换行符上的文本，它呈现如下：
http://i.stack.imgur.com/pY18f.png
http://i.stack.imgur.com/pY18f.png
Anyone know of an alternative, or how they would set this design out so that the background color & padding was consistent?
任何人都知道替代方案，或者他们将如何设置此设计以使背景颜色和填充保持一致？
Thanks in advance
提前致谢
Edit: I had simplified the code to make it concise, but had missed a vital part. Actually it's like this:
编辑：我简化了代码以使其简洁，但错过了一个重要部分。其实是这样的：
.greenbox {width:520px; height:261px; position:relative;}
.greenbox a {position:absolute; left:0; bottom:40px; }
.greenbox span { padding:0 10px; background:#000; }
With the html as:
与 html 为：
<div class="greenbox">
<a href="link"><span>The Title Goes Here</span></a>
</div>
Thus the span remains inline, wrapped in a absolute position anchor.
因此，跨度保持内联，包裹在绝对位置锚中。
采纳答案by thirtydot
I've tackled something similar before: Add padding at the beginning and end of each line of text
我以前处理过类似的事情：在每行文本的开头和结尾添加填充
I've robbed that solution from myself, and fit it to your case.
我已经从自己那里抢走了这个解决方案，并将其适合您的情况。
Note that the line-heightand paddingadjustments can be very trickyto get right.
请注意，调整line-height和padding调整可能非常棘手。
HTML:
HTML：
<div class="greenbox">
<a href="#"><span><span>
The Title Goes Here, with overflow
</span></span></a>
</div>
CSS:
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
}
回答by kizu
The somewhat easy way is to add borderto the left of a link and then add two wrappers, then position first to the left and the second back to the right, so it would like somehow like that: http://jsfiddle.net/kizu/fNGgN/4/
有点简单的方法是添加border到链接的左侧，然后添加两个包装器，然后将第一个定位在左侧，第二个定位在右侧，因此它会像这样：http: //jsfiddle.net/kizu /fNGgN/4/
