html - 在 p-tag 中填充以实现半透明图像叠加

标签 html css

我在 div 中有一个 img,我需要在其中覆盖需要填充的文本 block 。

外层 div 标签有 overflow:hidden,因为图片需要裁剪到最大高度。

如果你看看我的 fiddle

http://jsfiddle.net/Py49n/1/

您会看到 p-tag 内的文本被写到最右边,因为 p-tag 的宽度为 100% + padding。

如何在不使 p 标签变宽的情况下在文本上留出边距?

感谢您的帮助

最佳答案

使用 box-sizing: border-box(和适当的前缀)允许调整框的大小以包含填充。有关 CSS-Tricks 的更多信息.浏览器支持是 pretty good .如果您需要支持 IE7,您将需要另一个解决方案,也许是一个 polyfill。

关于html - 在 p-tag 中填充以实现半透明图像叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16447978/

相关文章:

javascript - 从 URL 获取查询字符串并将其传递给 Href

html - 文档树和DOM一样吗?

javascript - 在 Javascript 中,如何使输入框随其中的值变化而变化?

html - 如何使用 css 和 html 使行跨度列内容从列的顶部开始

c# - 在 .NET 中从 URI 到图像

css - 仅当在无样式的 HTML Details 标签内时,表单元素样式不正确

html - Bootstrap 下拉菜单 - 全宽和中央水平元素

css - 如何将最小高度设置为 Bootstrap 中另一个 div 中的 div?

html - 使用 css 选择器定位 html 标签文本

javascript - 基于 mousemove 的滚动脚本需要适应触摸屏使用