如果有背景图像，则包含字体的 div 对齐，否则超出边界
大卫 J。
我正在尝试在具有图像背景的按钮底部制作一个透明的 div。这个 div 将包含应该对齐的文本。文本的长度各不相同，因此 div 应该增大以容纳文本。
我的方法不起作用——它产生了这个结果：
这些按钮具有相同的类；唯一的区别是没有图像的那个是动态创建的：
<button class="tiles" style="padding: 0px; background: url(../static/bilder/Multifunktionstür.jpg); background-size: cover; background-repeat: no-repeat" v-if="selectedCategory==''" >
<div class="button-label flex-container">
<h3>MULTIFUNKTIONSTÜREN</h3>
</div>
</button>
<button v-for="category in categories" class="tiles" v-if="selectedCategory==''" @click="selectCategory(category)">
<div class="button-label flex-container">
<h3>{{ category.name.toUpperCase() }}</h3>
</div>
</button>
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.button-label {
text-align: center;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
width: 100%;
height: 20%;
bottom: 0px;
}
关于我可能做错了什么的任何想法？谢谢。
维琪
似乎您正在为带有图像的 div 赋予内联样式：style="padding: 0px;"。这是删除图像块中的空间。如果您也将填充 0 应用于另一个框，您应该能够在两个框中获得相同的结果。
您可以使用：
.button.tiles {
padding: 0;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如果有足够的空间，如何使div居中对齐，否则右对齐
- 2
如果有div存在，执行此操作，否则jquery无法正常运行
- 3
如果当前div超出范围，如何显示背景图像（多个）
- 4
将div与父div的背景图像对齐
- 5
如果有任何div通过警报分类
- 6
如果背景图像存在，则插入 div
- 7
如何使CSS元素超出包含div的所有边界？
- 8
如果上部在悬停时有边界，则底部 div 对齐问题
- 9
带有圆圈的智能背景div，但是如果背景图像该怎么办
- 10
Div 不应超过 Div，背景图像内有 div
- 11
Flexbox - 如果有 1 项则居中对齐，如果有 2 项则居中对齐
- 12
d3表超出div边界
- 13
d3表超出div边界
- 14
<ul> 元素超出其各自的 <div> 边界
- 15
如果有人单击“可拖动” div中的输入，如何拖动div？
- 16
div中的透明div与带有圆角的背景图像
- 17
如何检查div包含哪个背景图像？
- 18
如何检查div包含哪个背景图像？
- 19
内联块div的垂直对齐边界
- 20
如果有margin-top，则将div的高度拉伸到页面末尾
- 21
如果有约束力的基因敲除，摆脱我不需要的DIV
- 22
使用Nimbus外观时，如果有背景图像，则JButton在JFrame中完全消失
- 23
使用Nimbus外观时，如果有背景图像，则JButton在JFrame中完全消失
- 24
找到包含所有<div>的边界框
- 25
如果有父代ID，则获取最大ID，否则获取所有结果
- 26
在<a>标签内水平对齐div（具有背景图片）
- 27
<div>底部带有响应背景图像的多余空间
- 28
具有三个背景图像的<DIV>
- 29
在没有单独 CSS 的 Div 中设置背景图像
我来说两句