background-image 相关问题

background-image CSS属性为元素设置一个或多个背景图像。

我是学习 HTML 和 CSS 的初学者。我目前正在开发一个项目，并且正在使用媒体查询。我首先设计了桌面版本，因为这对我来说看起来更容易。那么为什么要设计 m...

html css media-queries background-image front-end-optimization

回答 1 投票 0

我想要做的是更改 div 的背景图像，但前提是背景图像 url 与某个 url 匹配。这是 HTML：我想做的是更改 background-image 的 div，但前提是 background-image url 与某个 url 匹配。这是 HTML： <div class="test" style="background-image: url("/background1.png");"> 现在我尝试的是这样的： if ($('.test').css('background-image') === 'url(/background1.png)') { $('.test').css("background-image", "url(/background2.png)"); } 我知道替换是有效的，因为如果我删除第一行，它会为我更新所有背景图像，但我似乎无法让第一行工作。你可以使用这样的东西 var bg = $(".test").css('background-image'); bg = bg.replace('url("','').replace('")',''); if (bg === '/background1.png') { $('.test').css("background-image", "url(/background2.png)"); } 小提琴示例：https://jsfiddle.net/bpv4Lggv/19/ .prop() 可能会带您到达您需要去的地方。 http://www.w3schools.com/jquery/html_prop.asp http://api.jquery.com/prop/ 使用过滤器获取所有带有测试类的div并匹配背景图像(url(/background1.png)) var filtered = $('.test').filter(function(test){ return $(test).css('background-image') === 'url(/background1.png)'; }); //change filtered DOM only, with the new image background $(filtered).css("background-image", "url(/background2.png)"); } 我不熟悉 JQuery，但我认为这就是您所要求的（在纯 JavaScript 中）？ if(element.style.backgroundImage == 'url("imagePathHere")'){ // your code } 现在可能没什么用处，但我有一段时间一直在尝试寻找解决方案，直到我控制台记录它并意识到我的问题是什么😅

javascript jquery html css background-image

回答 4 投票 0

在 ::before 选择器中使用绝对位置时，它不起作用

我试图使用 ::before 选择器设置背景图像，并且使用绝对位置，但是当我在浏览器中检查相同位置时，它显示位置为绝对位置，但我无法...

html css frontend css-position background-image

回答 1 投票 0

如何拉伸背景图像以覆盖整个 HTML 元素？

我正在尝试获取 HTML 元素（body、div 等）的背景图像以拉伸其整个宽度和高度。运气不太好。是否有可能，或者我是否必须以其他方式做到这一点...

html css background-image

回答 14 投票 0

防止梯度重复，如果这就是它在这里所做的

究竟什么可以解决这个问题？我尝试添加：background-repeat: no-repeat; 那什么也没做。在我提供的图像中，您可以看到渐变重复出现。我该如何防止这种情况发生？图像 ...

css background background-image linear-gradients

回答 1 投票 0

CSS：将背景图像插入标题

我试图插入背景图像作为我的标题的背景。如果我使用背景颜色作为标题的背景，效果会很好 h2 { 背景颜色：红色； ...

html css header background-image

回答 3 投票 0

Tailwind 问题背景图片未加载

我有顺风问题。我正在使用 React，我想用地图和 id 更改图像，所以我做了一个 .json 文件： [ { “id”：“1”， “标题”：...

javascript reactjs tailwind-css background-image

回答 1 投票 0

如何为Angular组件设置背景图片？

在我的角度应用程序中，我想为特定视图设置背景图像。为此，我将以下内容添加到组件的 css 文件中：身体 { 背景图像： url("../../../assets/

css angular url background-image

回答 5 投票 0

如何完全删除 HTML 表格的边框

我的目标是制作一个类似于“相框”的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...