background-image 相关问题

部分{ 背景图片：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%;

html css background-image

回答 1 投票 0

Next.js 设置背景图片

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

reactjs next.js background-image

回答 4 投票 0

html 上的媒体查询

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

html css image media-queries background-image

回答 4 投票 0

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

我无法将背景图片放入标签中，我不知道为什么它不起作用。以下所有操作都是在我的本地机器上完成的。我的网站也托管在 Linode 服务上...</desc> <question vote="1"> <p>我无法将背景图片放入 <pre><code><style></code></pre> 标签中，我不知道为什么它不起作用。</p> <p>以下所有操作均在我的本地机器上完成。我的网站也托管在 Linode 服务器上。</p> <p>我有以下代码，可以正常工作。它直接在身体内的<pre><code>div</code></pre>中设置背景图像（通过Django）：</p> <pre><code><body> <div class="scroll-container" style="background-image: url('{% static 'myapp/scroll-L.jpg' %}');"> </div> </body> </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><style></code></pre> 中的<pre><code><head></code></pre> 标签时，一切都开始出错：</p> <pre><code><style> .scroll-container { background-image: url("../../static/myapp/scroll-L.jpg") } </style> </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("static/myapp/scroll-L.jpg") } .scroll-container { background-image: url("/static/myapp/scroll-L.jpg") } .scroll-container { background-image: url("/../../static/myapp/scroll-L.jpg") } {% load static %} .scroll-container { background-image: url("{% static 'myapp/scroll-L.jpg' %}") } </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("scroll-L.jpg") } </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 = 'storages.backends.s3boto3.S3Boto3Storage' STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage' AWS_S3_OBJECT_PARAMETERS = { 'CacheControl': 'max-age=86400', } LINODE_BUCKET = os.environ.get('LINODE_BUCKET', 'hmst-bucket') LINODE_BUCKET_REGION = os.environ.get('LINODE_BUCKET_REGION', 'eu-central-1') LINODE_BUCKET_ACCESS_KEY = os.environ.get('LINODE_BUCKET_ACCESS_KEY', '#') LINODE_BUCKET_SECRET_KEY = os.environ.get('LINODE_BUCKET_SECRET_KEY', '#') AWS_S3_ENDPOINT_URL = f'https://{LINODE_BUCKET_REGION}.linodeobjects.com' 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 = 'cdn.mydomain.com' </code></pre> <p>所以我需要更改访问控制列表 (ACL) 的权限。我将对象存储的桶级 ACL 和对象级 ACL 从 </p><code><style> .scroll-container { background-image: url("https://hmst-bucket.eu-central-1.linodeobjects.com/myapp/scroll-L.jpg"); } </style> </code><pre> 更改为 </pre><code>This XML file does not appear to have any style information associated with it. The document tree is shown below. <Error> <Code>AccessDenied</Code> <BucketName>hmst-bucket</BucketName> <RequestId>#</RequestId> <HostId>#</HostId> </Error> </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>

html css django background-image content-security-policy

回答 0 投票 0

在 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);

c# wpf background-image

回答 7 投票 0

在 CSS 网格中使用背景图像

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

css image background-image css-grid

回答 2 投票 0

HTML背景无重复

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

html background background-image

回答 3 投票 0

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

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

css background-image opacity

回答 0 投票 0

如何在 laravel 9 中添加背景图片

我正在尝试在 Laravel 9.51 中为我的网站添加背景图片。我在我的 css 文件中使用了这个：身体 { 背景图像：url（“背景.jpg”）； } 但它不起作用。还尝试过：博...

css laravel frameworks background-image laravel-9

回答 4 投票 0

将 CSS 背景图像与偏移的图像中心轴对齐

我想使用 CSS 的 background-*-properties 将图像文件（如 .png）与偏移的图像中心轴对齐。想象一下有以下文档：我想使用 CSS 的.png*-属性将图像文件（如background-）与偏移的图像中心轴对齐。想象一下有以下文件： <div class="my-icon" data-category="1">abc</div> <div class="my-icon" data-category="2">def</div> <div class="my-icon" data-category="1">ghi</div> 具有以下样式表： .my-icon { background-position: center left; background-repeat: no-repeat; background-size: contain; padding-left: 25px; height: 30px; display: flex; } .my-icon[data-category="1"] { background-image: url('...../icon-1.png'); } .my-icon[data-category="2"] { background-image: url('...../icon-2.png'); } 我可以对齐图标如下： background-position: center center; background-position: center left; 然而，我想要的是以下内容：我希望图像的中心轴与从 x 的左侧偏移 div 像素的轴对齐。如何使用纯 CSS 实现这一壮举？（没有 JS/JQuery？）我会回复，因为这实际上不是答案，但我没有足够的代表... 如果您可以编辑 HTML，我建议您这样做： <div class="wrapper"> <div class="my-icon" data-category="1" style="width: 50%;"></div>  <div style="width: 50%:">abc</div> </div> 使用类而不是内联 css 当然。

html css background-image

回答 1 投票 0

CSS背景属性速记[关闭]

如何简写CSS背景属性？我已经看到了几个背景属性，但是否有某种方式或顺序将其写在一行中？

css background background-image

回答 1 投票 0

如何在背景图像结束后放置我的<p>文本</p>，保持领先<h1>原样？

网址是https://sputnick.fr/ HTML 是：身体 { 背景色：#15141A；背景图像：url（“https://sputnick.fr/header.jpg”）；白颜色; 字体系列：“宋体”；字体大小：...

html css background-image

回答 4 投票 0

SCSS 文件使用 image / url() 不会出现在页面样式中

两周前，我将我所有的 css 转换为 scss 文件。除了使用背景图像之外的所有内容都有效。我一直在研究解决方案无济于事，因为似乎类似的问题......