background-image 相关问题

如何将图库中本地图像的 url 添加到顺风 css 以创建背景图像？

当我将 url('.\images\desktop\image.jpg') 放在背景图像类中时，它不起作用。我不知道我是否做错了什么 如前所述，我尝试过但它不起作用

如何在 CSS 中的无缝背景图像上使用不透明度等效线性渐变

我想在 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...

背景图片：url() 似乎不适用于 Github 部署

我一直在寻找这个解决方案一段时间，但我仍然找不到解决问题的任何线索...... background-img: url() 与我的本地工作得很好但是当我部署到 Github 时，它只是一张空白图片...

尝试在 React Js 中创建轮播，但函数显示为未定义 no-undef

我正在尝试创建一个每 3 秒有三个循环背景图像的 div。现在，当我编写代码时，它向我显示了一个错误，显示 Line 13:3: 'startCarousel' is not defined no-undef

CSS 背景图像不显示在 Django 框架中

遵循 Django 中的 Polls Webapp 教程。通过我的命令行继续收到 404 错误，并显示我的图像图标，但不显示图像本身。 尝试改变路径几次，

如何在机器人框架中验证背景图像

我需要你的帮助 我想知道是否有键盘来确认 DOM 中是否有背景图像，或者控制台中是否会出现一些消息，好像有背景图像......

缺少文件夹的 CSS 路径

我正在尝试在本地升级我的 WP 站点，这是我当时在本地构建的。 所以我想在我的 div 上放一个背景，为此我在我的 css 中写了： 背景图片：url('./../../images/png/

背景图像：线性渐变在 Safari 中不起作用

我在网站的许多页面上都遇到了问题，但这里举一个例子：https://mypieceofcakemove.com/storage/ 在页面的英雄部分，我使用了 Avada 主题的选项来创建一个线性渐变......

我正在尝试将动画 GIF 插入网页，尽管这会正确插入代码，但不会使用内容更新页面

我正在使用 JavaScript 将 GIF 放在背景上，尽管这会创建下面的文本但不会更新页面我不确定为什么没有人可以提供帮助？ 在调试器中，如果我输入 var...

如何在 css 中制作堆栈背景（颜色渐变和照片）

我制作了一个 flutter 应用程序，我想将其转换为一个网站，到目前为止一切顺利，但我希望该应用程序的相同背景出现在网站上。 这是应用程序背景的屏幕截图 背景

上浆背景图片

部分{ 背景图片：url("../img/singupbg.png"); 背景尺寸：封面； 背景重复：不重复； 宽度：100vw； 高度：100vh； `在这里输入代码` } section { background-image: url("../img/singupbg.png"); background-size: cover; background-repeat: no-repeat; width: 100vw; height: 100vh; `enter code here` } <div> <section> <div class="signup-area"> <h1>Hesap Oluştur</h1> <button class="google"> <img src="../img/google.png" alt="" /> Google ile kayıt ol </button> <div class="or"> <hr width="50px" /> ya da <hr width="50px" /> </div> <form action="#"> <div class="input-area"> <span> E-posta adresi</span> <input type="text" /> </div> <div class="input-area"> <span>Şifre Oluştur</span> <input type="password" /> </div> <div class="input-area"> <span>Şifreyi Tekrarla</span> <input type="password" /> </div> <button class="signup">Kaydol</button> </form> <span class="login">Zaten Hesabınız var m? <a href="">Giriş Yapın</a></span> </div> </section> </div> 原图这是网站 我想将原始图像作为背景，但是当我应用这些代码时，它不适合背景并且从底部被裁剪。当我调整高度时，宽度变得太小了。我该怎么办？ 你试过这个吗？ background-size: 100%;

Next.js 设置背景图片

我正在尝试向 next.js 添加背景图片，但无法这样做。我尝试了很多内联 scc、style jsx 和其他技术的解决方案。无法直接写入样式，因为我...

html 上的媒体查询

有没有办法在 html 上使用媒体查询？我需要在我的页面上放置一个像横幅一样的图像，当屏幕小于 768px 时它显示一个较小的图像但是当屏幕增长到 m...

在 <style> 标签内时背景图像未加载。在 <div> 本身中设置样式时效果很好。不是不正确的文件路径问题

我无法将背景图片放入 标签中，我不知道为什么它不起作用。 以下所有操作都是在我的本地机器上完成的。我的网站也托管在 Linode 服务上...</desc> <question vote="1"> <p>我无法将背景图片放入 <pre><code>&lt;style&gt;</code></pre> 标签中，我不知道为什么它不起作用。</p> <p>以下所有操作均在我的本地机器上完成。我的网站也托管在 Linode 服务器上。</p> <p>我有以下代码，可以正常工作。它直接在身体内的<pre><code>div</code></pre>中设置背景图像（通过Django）：</p> <pre><code>&lt;body&gt; &lt;div class=&#34;scroll-container&#34; style=&#34;background-image: url(&#39;{% static &#39;myapp/scroll-L.jpg&#39; %}&#39;);&#34;&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>当我加载页面时，您可以看到滚动图像加载正常（image1 <a href="https://i.imgur.com/T75mFyl.png" rel="nofollow noreferrer">https://i.imgur.com/T75mFyl.png</a>）</p> <p>然而，当我将背景图像放入<pre><code>&lt;style&gt;</code></pre> 中的<pre><code>&lt;head&gt;</code></pre> 标签时，一切都开始出错：</p> <pre><code>&lt;style&gt; .scroll-container { background-image: url(&#34;../../static/myapp/scroll-L.jpg&#34;) } &lt;/style&gt; </code></pre> <p>当我加载页面时，您可以看到滚动图像未加载（image2 <a href="https://i.imgur.com/RCsWhE7.png" rel="nofollow noreferrer">https://i.imgur.com/RCsWhE7.png</a>）</p> <p>我不能在 head 样式标签中使用 Django 的 <pre><code>{% static ... %}</code></pre>，所以它不起作用。</p> <p>这显然与对象存储 (eu-central-1.linodeobjects) 有关，但我不知道是什么。为什么在 <pre><code>div</code></pre> 风格而不是 <pre><code>style</code></pre> 标签内使用图像时它会起作用？</p> <p>我已经搜索了大约 2 个小时试图找到修复程序，但我无法弄清楚。</p> <p>文件路径是正确的，但只是为了确认我尝试了以下但没有成功：</p> <pre><code>.scroll-container { background-image: url(&#34;static/myapp/scroll-L.jpg&#34;) } .scroll-container { background-image: url(&#34;/static/myapp/scroll-L.jpg&#34;) } .scroll-container { background-image: url(&#34;/../../static/myapp/scroll-L.jpg&#34;) } {% load static %} .scroll-container { background-image: url(&#34;{% static &#39;myapp/scroll-L.jpg&#39; %}&#34;) } </code></pre> <p>我需要做一些事情，而不是将背景图片直接放在 div 中，因为我正在为我的网站整理<pre><code>CSP</code></pre>，如果它是样式直接设置到 div.<pre> </pre>我还尝试将图像直接放在模板文件夹中，这样我就可以调用：<pre> </pre><code>nonce</code></p> <p>但是那也没有用。我也试过把它放进</p><code>hash</code><pre>，但收效甚微。</pre> <p>编辑：这是我在 settings.py 中存储对象的代码：<pre> </pre><code>.scroll-container { background-image: url(&#34;scroll-L.jpg&#34;) } </code></p> <p> </p> <pre>您想使用 s3 存储作为 CloudFront(CDN)。所以你需要配置</pre>AWS_S3_CUSTOM_DOMAIN</question>变量。<answer tick="false" vote="0"> <p><code>master.css</code><strong> </strong>官方 django-storages 文档。 </p>点击查看<pre></pre> <p> <a href="https://django-storages.readthedocs.io/en/latest/backends/amazon-S3.html#cloudfront" rel="nofollow noreferrer"> </a>这是对将来遇到同样问题的任何人的修复。</p> </answer>我没有调用背景图像的文件路径，而是直接从我的对象存储桶中调用图像：<answer tick="false" vote="0"> <p><code># Object Storage for Django static files (https://www.codingforentrepreneurs.com/blog/linode-object-storage-for-django-static-files/) DEFAULT_FILE_STORAGE = &#39;storages.backends.s3boto3.S3Boto3Storage&#39; STATICFILES_STORAGE = &#39;storages.backends.s3boto3.S3Boto3Storage&#39; AWS_S3_OBJECT_PARAMETERS = { &#39;CacheControl&#39;: &#39;max-age=86400&#39;, } LINODE_BUCKET = os.environ.get(&#39;LINODE_BUCKET&#39;, &#39;hmst-bucket&#39;) LINODE_BUCKET_REGION = os.environ.get(&#39;LINODE_BUCKET_REGION&#39;, &#39;eu-central-1&#39;) LINODE_BUCKET_ACCESS_KEY = os.environ.get(&#39;LINODE_BUCKET_ACCESS_KEY&#39;, &#39;#&#39;) LINODE_BUCKET_SECRET_KEY = os.environ.get(&#39;LINODE_BUCKET_SECRET_KEY&#39;, &#39;#&#39;) AWS_S3_ENDPOINT_URL = f&#39;https://{LINODE_BUCKET_REGION}.linodeobjects.com&#39; AWS_ACCESS_KEY_ID = LINODE_BUCKET_ACCESS_KEY AWS_SECRET_ACCESS_KEY = LINODE_BUCKET_SECRET_KEY AWS_S3_REGION_NAME = LINODE_BUCKET_REGION AWS_S3_USE_SSL = True AWS_STORAGE_BUCKET_NAME = LINODE_BUCKET AWS_DEFAULT_ACL = None </code></p> <p>当我尝试打开图像时，出现 403（禁止错误）并显示以下消息：</p> <pre><code>AWS_S3_CUSTOM_DOMAIN = &#39;cdn.mydomain.com&#39; </code></pre> <p>所以我需要更改访问控制列表 (ACL) 的权限。我将对象存储的桶级 ACL 和对象级 ACL 从 </p><code>&lt;style&gt; .scroll-container { background-image: url(&#34;https://hmst-bucket.eu-central-1.linodeobjects.com/myapp/scroll-L.jpg&#34;); } &lt;/style&gt; </code><pre> 更改为 </pre><code>This XML file does not appear to have any style information associated with it. The document tree is shown below. &lt;Error&gt; &lt;Code&gt;AccessDenied&lt;/Code&gt; &lt;BucketName&gt;hmst-bucket&lt;/BucketName&gt; &lt;RequestId&gt;#&lt;/RequestId&gt; &lt;HostId&gt;#&lt;/HostId&gt; &lt;/Error&gt; </code><p>。<pre> </pre>我使用 Linode，所以我遵循了这个指南：<pre>https://www.linode.com/docs/products/storage/object-storage/guides/acls/</pre>。要更改对象级别 ACL，指南说您需要单击更多选项省略号并选择</p>Details<p>，但是这已经过时了，您需要单击实际对象本身。<a href="https://www.linode.com/docs/products/storage/object-storage/guides/acls/" rel="nofollow noreferrer"> </a>更改这些权限解决了这个问题。<em> </em> </p><p>

在 C# 代码中更改 WPF 窗口背景图像

我有几个图像配置为应用程序资源。 当我的应用程序启动时，主窗口的背景是通过 XAML 设置的： 我有几个图像配置为应用程序资源。 当我的应用程序启动时，主窗口的背景是通过 XAML 设置的： <Window.Background> <ImageBrush ImageSource="/myapp;component/Images/icon.png" /> </Window.Background> 如果给定的事件发生，我想将此背景更改为另一个资源（"/myapp;component/Images/icon_gray.png"）。 我试过使用两个常量： private static readonly ImageBrush ENABLED_BACKGROUND = new ImageBrush(new BitmapImage(new Uri("/myapp;component/Images/icon.png"))); private static readonly ImageBrush DISABLED_BACKGROUND = new ImageBrush(new BitmapImage(new Uri("/myapp;component/Images/icon_gray.png"))); ...但很自然地，我得到了无效 URI 的异常。 是否有一种简单的方法可以使用包 Uri 或资源（即：this.Background = ...）更改 WPF 窗口的背景图像（通过Myapp.Properties.Resources.icon）？ 这个呢： new ImageBrush(new BitmapImage(new Uri(BaseUriHelper.GetBaseUri(this), "Images/icon.png"))) 或者，这个： this.Background = new ImageBrush(new BitmapImage(new Uri(@"pack://application:,,,/myapp;component/Images/icon.png"))); 这里是 XAML 版本 <Window.Background> <ImageBrush> <ImageBrush.ImageSource> <BitmapImage UriSource="//your source .."/> </ImageBrush.ImageSource> </ImageBrush> </Window.Background> 问题是你在代码中使用它的方式。试试下面的代码 public partial class MainView : Window { public MainView() { InitializeComponent(); ImageBrush myBrush = new ImageBrush(); myBrush.ImageSource = new BitmapImage(new Uri("pack://application:,,,/icon.jpg", UriKind.Absolute)); this.Background = myBrush; } } 您可以在中找到有关此的更多详细信息 http://msdn.microsoft.com/en-us/library/aa970069.aspx 我只是将一张图片放在"d drive-->Data-->IMG"。图片名称是x.jpg: 和 c# 代码类型 ImageBrush myBrush = new ImageBrush(); myBrush.ImageSource = new BitmapImage(new Uri(BaseUriHelper.GetBaseUri(this), "D:\\Data\\IMG\\x.jpg")); （请在路径之间加上双斜线） this.Background = myBrush; 终于拿到背景了.. Uri resourceUri = new Uri(@"/cCleaner;component/Images/cleanerblack.png", UriKind.Relative); StreamResourceInfo streamInfo = Application.GetResourceStream(resourceUri); BitmapFrame temp = BitmapFrame.Create(streamInfo.Stream); var brush = new ImageBrush(); brush.ImageSource = temp; frame8.Background = brush; 我一直在尝试这里的所有答案，但没有成功。这是使用 ms-appx 执行此操作的最简单方法 ImageBrush myBrush = new ImageBrush(); Image image = new Image(); image.Source = new BitmapImage(new Uri(@"ms-appx:///Assets/background.jpg")); myBrush.ImageSource = image.Source; TheGrid.Background = myBrush; Assets文件夹在我项目的第一层，所以一定要改成方便的路径。 img.UriSource = new Uri("pack://application:,,,/images/" + fileName, UriKind.Absolute);

在 CSS 网格中使用背景图像

我正在尝试使用 CSS 网格让图像填充网页。除了使用 CSS 网格之外，我还可以使用 CSS 属性“背景图像”来做到这一点。但是，一旦我尝试使用 background-image

HTML背景无重复

如何在 html 中适应背景图像而不重复覆盖整个页面？它有 HTML 代码还是我必须使用 CSS 代码？

在不影响文字的情况下为我的背景图像添加不透明度

.hero { 背景： 线性渐变（rgba（0 0 0 / 10%），rgba（0 0 0 / 30%）， url("/img/front-truck-pic.jpeg") 无重复中心固定； 背景大小：cov ...