[英]How to stretch background image of a table cell with CSS?
How can I stretch background image of a table cell with CSS? 如何用CSS拉伸表格单元格的背景图像? I have Googled it with no results. 我用谷歌搜索没有结果。
When you set background image of a cell and the background size is smaller than the cell, then it will be repeated. 当您设置单元格的背景图像并且背景大小小于单元格时,将重复该单元格。
How can I force this background to stretch the entire table cell instead? 如何强制此背景来拉伸整个表格单元呢?
It is possible to stretch a background image using the background-size
CSS property . 可以使用background-size
CSS属性拉伸背景图像 。
Examples: 例子:
body { background-size: 100% auto } /* Stretches image to full horiz. width */
body { background-size: 50% 50% } /* Stretches image to half of available
width and height - WARNING: aspect ratio not maintained */
body { background-size: cover } /* Ensures that image covers full area */
body { background-size: contain } /* Ensures that image is completely visible */
All major current browsers support the feature: 目前所有主流浏览器都支持该功能:
You can't stretch a background image. 您无法拉伸背景图像。
If you want to stretch an image, you have to put it in an img
tag. 如果要拉伸图像,则必须将其放在img
标记中。 You can use absolute positioning to put content on top of the image. 您可以使用绝对定位将内容放在图像的顶部。
It is possible. 有可能的。
NOTE: This is using CSS3 and will not be supported by inferior browsers. 注意:这是使用CSS3,劣质浏览器不支持。
If you set your cell with this styling it should solve your problem. 如果您使用此样式设置单元格,它应该可以解决您的问题。 It will also allow for collapsible tables too because you're using %. 它也将允许可折叠表,因为您使用%。
background-image: url('XXX');
background-repeat: no-repeat;
background-size: 100% 100%;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.