background-image 相关问题

我的目标是制作一个类似于“相框”的HTML页面。换句话说，我想制作一个被4张图片包围的空白页面。这是我的代码： ... 我的目标是制作一个类似于“相框”的HTML页面。换句话说，我想制作一个被4张图片包围的空白页面。这是我的代码： <table> <tr> <td class="bTop" colspan="3"> </td> </tr> <tr> <td class="bLeft"> </td> <td class="middle"> </td> <td class="bRight"> </td> </tr> <tr> <td class="bBottom" colspan="3"> </td> </tr> </table> CSS 类如下： .bTop { width: 960px; height: 111px; background-image: url('../Images/BackTop.jpg'); } .bLeft { width: 212px; height: 280px; background-image: url('../Images/BackLeft.jpg'); } .middle { width: 536px; height: 280px; } .bRight { width: 212px; height: 280px; background-image: url('../Images/BackRight.jpg'); } .bBottom { width: 960px; height: 111px; background-image: url('../Images/BackBottom.jpg'); } 我的问题是表格单元格之间出现细白线，我的意思是图片的边框不连续。我怎样才能避免这些空白？ <table cellspacing="0" cellpadding="0"> 在CSS中： table {border: none;} 编辑：正如 iGEL 指出的，该解决方案已被正式弃用（尽管仍然有效），因此如果您从头开始，则应该使用 jnpcl 的边框折叠解决方案。到目前为止，我实际上非常不喜欢这种更改（不经常使用表格）。它使某些任务变得更加复杂。例如。当您想在同一位置（视觉上）包含两个不同的边框时，其中一个是一行的顶部，第二个是另一行的底部。它们将折叠（= 仅显示其中之一）。然后你必须研究边框的“优先级”是如何计算的以及哪些边框样式“更强”（双边框与实心边框等）。我确实喜欢这样： <table cellspacing="0" cellpadding="0"> <tr> <td class="first">first row</td> </tr> <tr> <td class="second">second row</td> </tr> </table> ---------- .first {border-bottom:1px solid #EEE;} .second {border-top:1px solid #CCC;} 现在，随着边框折叠，这将不起作用，因为总是有一个边框被删除。我必须以其他方式做到这一点（有更多的解决方案）。一种可能性是使用带有 box-shadow 的 CSS3： <table class="tab"> <tr> <td class="first">first row</td> </tr> <tr> <td class="second">second row</td> </tr> </table> <style> .tab {border-collapse:collapse;} .tab .first {border-bottom:1px solid #EEE;} .tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;} </style> 您还可以使用类似“groove|ridge|inset|outset”的边框样式，只有一个边框。但对我来说，这不是最佳选择，因为我无法控制两种颜色。也许有一些简单而不错的折叠边框解决方案，但我还没有看到它，而且老实说我没有花太多时间在上面。也许这里有人可以向我/我们展示;) table { border-collapse: collapse; } 对我来说，我需要做这样的事情来完全删除表格和所有单元格的边框。这根本不需要修改 HTML，这对我的情况很有帮助。 table, tr, td { border: none; } 在引导环境中，最重要的答案都没有帮助，但应用以下内容删除了所有边框： .noBorder { border:none !important; } 应用为： <td class="noBorder"> 在引导环境中，这是我的解决方案： <table style="border-collapse: collapse; border: none;"> <tr style="border: none;"> <td style="border: none;"> </td> </tr> </table> 这就是为我解决问题的方法：在您的 HTML tr 标记中，添加以下内容： style="border-collapse: collapse; border: none;" 这删除了表格行上显示的所有边框。使用 TinyMCE 编辑器，我能够删除所有边框的唯一方法是在如下样式中使用 border:hidden： <style> table, tr {border:hidden;} td, th {border:hidden;} </style> 在 HTML 中是这样的： <table style="border:hidden;"</table> 干杯这里的所有答案在 2022 年都不起作用（至少对于 Chrome 来说），除了 <table cellspacing="0" cellpadding="0">。然而我需要一种 CSS 解决方案，而不是 HTML 解决方案。所以这里是： table, thead, tbody, tfoot, tr, th, td { padding: 0; border-spacing: 0; } padding 是 HTML cellpadding 的 CSS 同义词，border-spacing 分别代表 cellspacing。但这并不是一件很明显的事情。在全局 CSS 中使用此 CSS 样式 .table, .monthview-datetable td, .monthview-datetable th { border: none !important; } 鉴于： <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <table> 在你的 CSS 上使用它会起作用： tr { border: transparent 1px solid; } 我发现border-spacing是我的问题 td, th, tr, table { border: 0 !important; border-spacing:0 !important; } table { border: none; } 您可以使用此 css 属性来隐藏表格边框。这解决了我的 th,td 周围微小边框的问题（=背景表的颜色）。设置盒子阴影的颜色：1px 1px 1px #003366;与背景颜色相同。在 Edge、Chrome 和 Firefox 中尝试过！ table { padding: 0; border-collapse: collapse; border: none; } th { background-color: #003366; color: white; text-align: center; box-shadow: 1px 1px 1px #003366; }

html css html-table background-image

回答 13 投票 0

偏移背景图片

如何偏移背景图像，使背景仅从父容器顶部显示图像的下半部分，而图像的另一上半部分隐藏为...

html css background-image background-position

回答 1 投票 0

如何将背景图像添加到空锚标记而不将我的文本显示在图像上？

我正在尝试将背景图像放在空锚标记上，并在该图像下方 20px 处显示文本。它位于弹性盒内，因此当我调整屏幕大小时它会做出响应。图像和...

html css flexbox background-image anchor

回答 1 投票 0

PencilKit 将背景图像和绘图保存到相册 Xcode

我想将画布保存到相册，但是当我返回相册时，我的子视图不可见。我只有我的画布和我的画。我应该改变什么？结构主页：查看{ @State var ca...