background-image CSS属性为元素设置一个或多个背景图像。
我想知道如何让背景仅显示在角落（以及内容周围的其他 3 个角落），如下图所示......即： 我显然无法拥有大图像和
Google Chrome 扩展 - 无法使用 CSS 加载本地图像
我有一个简单的 Chrome 扩展程序，它使用内容脚本功能来修改网站。更具体地说，是所述网站的背景图像。 由于某种原因，我似乎无法使用 l...
我有以下代码来添加图像作为背景，但是当在浏览器中呈现时，网址会添加 "，有人知道为什么吗？ 模板 我有以下代码来添加图像作为背景，但是当在浏览器中呈现时，网址会添加"，有人知道为什么吗？ 模板 <picture class="picture background-image" [style.background-image]="'url(' + this.componentParams.link + ')'" title={{this.componentParams.title}}> </picture> 组件 public componentParams: any = { link: "../../../assets/images/category/montagem-moveis.png", title: "Montagem de imóveis" }; 渲染 <picture _ngcontent-ng-c4105489152="" class="picture background-image" title="Montagem de imóveis" style="background-image: url("../../../assets/images/category/montagem-moveis.png");"></picture> 您面临的问题与浏览器如何编码 URL 中的特殊字符有关。在本例中，" 字符被编码为 "，这导致了问题。 要解决此问题，您应该使用 Angular 的属性绑定语法，而无需手动连接字符串。像这样修改你的模板代码： 模板： <picture class="picture background-image" [style.background-image]="'url(' + componentParams.link + ')'" [title]="componentParams.title"> </picture> 在此更新的代码中，我们对 [...] 和 style.background-image 使用属性绑定语法 (title)。通过这样做，Angular 将处理特殊字符的正确编码，并且您不应再在 URL 中看到 "。 此外，在模板中访问 this 时无需使用 componentParams，因为 Angular 会自动知道您正在引用组件的属性。 经过这些更改，渲染的输出应该是： <picture _ngcontent-ng-c4105489152="" class="picture background-image" title="Montagem de imóveis" style="background-image: url(../../../assets/images/category/montagem-moveis.png);"></picture> 现在，style属性应包含正确的 URL，无需 " 编码。
enter image description here我想让我的背景全屏，但我不知道为什么footerWrap下面有一个空白。这是我的代码 身体{ 背景：url('./Images/login.jpg');...
我试图将我的背景图片放在一个 div 元素中，但是当我添加 div 时它会垂直重复，即使使用 background-repeat: no-repeat;我的检查工具说我溢出了。怎么会...
我正在尝试将带有“之前”标签的背景图像加载到列表中以在列表的后面创建复选标记图像，但图像没有显示。问题是什么？这是
我被要求创建一个网站页面，每个垂直块都有一个正弦波形状的顶部和底部。 然而，在这种情况下，块具有背景图像或视频，内容 w...
为什么这个嵌入 Youtube <iframe> 的视频背景不能在 Safari 或 Chrome Mobile 中播放？
我有这个 Youtube 视频作为我网站的背景。它在 Opera、Brave、桌面 Chrome 等中完全按照预期工作。但我有两个问题： 视频不会在 Safari 或 ...
当我在它下面插入 p 或 span 时，html 背景图像在输入中消失了
这里有两个字段，里面有背景图片，看起来很正常。当我在第一次输入之后和第二次（中间）之前添加两个 或 时，一切正常，... 这里有两个<input>字段，里面有background-image，看起来很正常。当我在第一个 <p> 之后和第二个（中间）之前添加两个 <span> 或 input 时一切正常，但是如果我在它们中间添加一个 <p> 标签，并且在第二次输入之后或第一次输入之前添加一个，然后background-image在第二个或第一个输入字段中相应地消失。 有人可以解释发生了什么吗？ form { background-color: blue; } input { background-color: transparent; border: 1px solid white; } input:first-child { background-image: url(./Images/user-icon.png); background-repeat: no-repeat; } input:last-child { background-image: url(./Images/lock-icon.png); background-repeat: no-repeat; } <form action=""> <input type="text" name="" id="" /> <p>text</p> <input type="password" name="" id="" /> <p>text</p> </form> 我试过 display:flex, display:block - 同样在这里。 当您在第二个输入之后放置一个 p 元素时，该输入不再是最后一个子元素。 在这种情况下，您可以通过使用 last-of-type 来解决这个问题： form { background-color: blue; } input { background-color: transparent; border: 1px solid white; } input:first-of-type { background-image: url(https://picsum.photos/id/1015/300/300); background-repeat: no-repeat; } input:last-of-type { background-image: url(https://picsum.photos/id/1015/300/300); background-repeat: no-repeat; } <form action=""> <input type="text" name="" id="" /> <p>text</p> <input type="password" name="" id="" /> <p>text</p> </form> 同样，当前面有一个 p 元素时，您可以对第一个输入使用 first-of-type 来覆盖这种情况。
如何在仅选择第一个列表而不是列表的其余部分中添加背景图像。 所以换句话说，我只想在文本只排序时有一个排序图标。 我想在旁边添加一张图片...
我正在尝试创建一个带有背景图像和带有“窗口”的白色矩形的登录页面。 我无法正确设置 css。在 figma 中，我使用“窗口”矩形作为主...
我有两个元素，一个是背景图片，我希望它的宽度是网页的 60%，虽然它在一个容器中，另一个是彩色的 div，我也想占据页面的 60%，剩下的......
我计划为朋友构建一个自定义照片库，我确切地知道我将如何生成 HTML，但是我遇到了 CSS 的一个小问题。（我宁愿没有
我无法在 CSS 中加载我想要的图像.. 我写代码：背景图像：url（但这里是照片的链接） 并给我错误：ERR_FILE_NOT_FOUND 我尝试了一切并在 youtu 上观看视频......
如何将图库中本地图像的 url 添加到顺风 css 以创建背景图像？
当我将 url('.\images\desktop\image.jpg') 放在背景图像类中时，它不起作用。我不知道我是否做错了什么 如前所述，我尝试过但它不起作用
我想在 CSS 中做这件事： 分区{ 背景：线性渐变（到顶部，rgba（255,0,0,0），rgba（255,0,0,1），rgba（255,0,0,0））； 宽度：1000px； 高度：1000px； } 你好... 我想在 CSS 中做这件事： div { background: linear-gradient(to top, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0)); width: 1000px; height: 1000px; } <div>hello</div> 但不是颜色，我想要渐变淡入淡出背景图像，像这样： background: linear-gradient(to top, transparent, url(/myimage.png) repeat, transparent); 如何在 CSS 中完成这个，或者如果在 CSS 中不可能，在 JS 中。 我的图像是无缝纹理，所以也许这可能会影响等式，因为它是重复的。我还想将 background-size 设置为不同的大小来弄清楚，所以如果你也可以指定它，那就太好了。 可以考虑mask来做这个。您可以指定与背景相同的属性，因此您可以轻松定义渐变。 .box { width: 1000px; height: 1000px; position:relative; z-index:0; } .box:before { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background:url(https://picsum.photos/id/42/10/10); -webkit-mask-image:linear-gradient(to top, transparent, #fff, transparent); mask-image:linear-gradient(to top, transparent, #fff, transparent); } <div class="box">hello</div> 或者你可以使用多个背景来模拟这个。你不会有透明度，但你会得到更好的支持： .box { width: 1000px; height: 1000px; background: linear-gradient(to top,#fff, transparent, #fff), url(https://picsum.photos/id/42/10/10); } <div class="box">hello</div> background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(your-image-url.jpg); background-blend-mode: overlay;
如何使用 Javascript 验证 CSS 背景图像 URL
逻辑是检查CSS元素的id（.boot）的url。如果 url 匹配，它会打印 hello world。但它没有做任何事情，我不知道为什么。 上下文：有个屁股……
如何使用 Javascript if 语句验证 CSS 背景图像 URL
我的目标是通过单击按钮制作的这些 gif 进行无缝打开和关闭过渡。逻辑是检查元素（.boot）id 的 url。如果 url 匹配，则打印 he...
我一直在寻找这个解决方案一段时间，但我仍然找不到解决问题的任何线索...... background-img: url() 与我的本地工作得很好但是当我部署到 Github 时，它只是一张空白图片...
尝试在 React Js 中创建轮播，但函数显示为未定义 no-undef
我正在尝试创建一个每 3 秒有三个循环背景图像的 div。现在，当我编写代码时，它向我显示了一个错误，显示 Line 13:3: 'startCarousel' is not defined no-undef