background-image 相关问题

我想在同一个元素上显示多个背景图像。我的实现如下所示：（使用引导程序）我想在同一个元素上显示多个背景图像。我的实现如下所示：（使用引导程序） <a class="left-icon icon-share list-group-item list-group-item-primary list-group-item-action">Exportable</a> .list-group-item-action.left-icon { background-image: var(--icon-auto-url), var(--list-group-action-icon); background-position-x: var(--list-group-icon-padding-x), right var(--list-group-icon-padding-x); background-position-y: center; } 这在 Safari 中可以按预期工作，但在 Chrome 中却不行。有什么想法我做错了什么吗？野生动物园：谷歌浏览器：并非所有网络浏览器都以相同的方式读取代码。您的代码的问题是所有浏览器（包括 Chrome）均不支持“background-position-x”。更广泛使用的属性就是“背景位置”。您可以执行以下操作： .list-group-item-action.left-icon { background-image: var(--icon-auto-url), var(--list-group-action-icon); background-position: var(--list-group-icon-padding-x) center, right var(--list-group-icon-padding-x) center; } 这样，您就可以将 x 和 y 坐标放入应该支持的背景位置属性中。

css bootstrap-4 background-image background-position

回答 1 投票 0

我如何添加一个 javascript 函数来更改我网站的所有 html 页面上的所有背景颜色和配色方案？

如何添加一个 Javascript 函数来更改我网站的所有 html 页面上的所有背景颜色和配色方案？尝试了功能但只改变了一页的背景。什么...

javascript html css background-image

回答 1 投票 0

我希望背景在svg下方有不同的颜色，在svg上方有不同的颜色，我设置为背景，我怎样才能实现这一点？

我想在 svg 下面有一个单独的背景颜色，在 svg 上面有一个单独的背景颜色。请注意，我已经为 body 元素设置了背景图像，并且我将使用网格布局...

html css svg background-image linear-gradients

回答 1 投票 0

我可以只为div的背景图像设置不透明度吗？

假设我有你好我想放置一个背景图像并将其不透明度设置为 0.5 – 但我希望我编写的文本具有完全不透明度 (1)....

html css background background-image

回答 9 投票 0

平滑的firefox背景渐变

我注意到 Firefox 中的背景渐变与 Chromium 相比渲染得不太平滑。火狐浏览器：铬： Firefox 使用更多“伪影”渲染渐变，而不是

css firefox background-image gradient chromium

回答 1 投票 0

平滑的firefox背景gardient

我注意到，与 Chromium 相比，Firefox 中的背景渐变渲染得不太平滑。火狐浏览器：铬： Firefox 使用更多“伪影”渲染渐变，而不是

css firefox background-image gradient chromium

回答 1 投票 0

用作背景图像时如何缩放 CSS 精灵？

我无法让我的精灵缩放到更小的尺寸。我希望它是实际尺寸 100x100px 的一半。如何使用背景大小属性缩放它？现在它只显示

css background-image sprite-sheet

回答 2 投票 0

抖动模糊图像会导致 ImageFilter.blur() 通过圆角渗色。完整的小部件模糊问题

我正在尝试创建一个简单的容器小部件，它具有圆角和模糊的背景图像。然而，BackdropFilter 和 ImageFilter.blur() 在创建小部件模糊时反应不佳......

flutter user-interface background-image blur

回答 1 投票 0

在所有幻灯片中设置背景图像（Quarto - Revealjs）

我使用 Quarto（通过 RStudio）进行工作，并制作 Revealjs 演示文稿。我想将相同的背景图像（来自与 qmd 位于同一目录中的 .png 文件）应用于所有幻灯片（没有 ha...

background-image quarto reveal.js

回答 1 投票 0

是否有 srcset 相当于 css 背景图片

img 看起来是制作响应式图像的好方法。是否有适用于 css background-image 属性的等效语法？超文本标记语言带有 img 属性的 srcset 看起来是制作响应式图像的好方法。是否有适用于 css background-image 属性的等效语法？ HTML <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah"> CSS .mycontainer { background: url('what goes here?'); } image-set 是等效的 CSS 功能。我们应该在规范中添加等效的 srcset 功能（根据资源的维度定义资源）。自 2023 年 5 月 4 日起发布的所有主要浏览器都支持此功能，无需前缀。为了支持较旧的浏览器（主要是 Chrome 和 Edge），您可以添加带有 -webkit- 前缀的变体，请参阅我可以使用。另一种方法，坦率地说更稳健，是将背景图像的特征和选项调整为具有 srcset 属性的图像。为此，请将图像设置为宽度：100%；高度：100%；和对象适合：覆盖或包含。这是一个例子： .pseudo-background-img-container { position: relative; width:400px; height: 200px; } .pseudo-background-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } <div class="pseudo-background-img-container"> <img class="pseudo-background-img" src="https://cdn3.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg" srcset="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg 640w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-280x175.jpg 280w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-432x270.jpg 432w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-216x135.jpg 216w" sizes="(max-width: 640px) 100vw, 640px"> </div> 这可能不是每个人的最佳方法，但我想它会在没有任何 JavaScript 解决方法的情况下获得最理想的结果。非常确定： background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x ); 以同样的方式工作。浏览器将检查图像，查看哪一个最适合并使用该图像。您可以根据您的目的使用媒体查询。就这么简单： .mycontainer { background-image:url("img/image-big.jpg"); // big image } @media(max-width: 768px){ .mycontainer { background-image:url("img/image-sm.jpg"); // small image } } 我认为它适用于所有支持媒体查询的浏览器；）对于polyfill，您可以使用带有srcset的img作为下载正确图像大小的机制，然后使用JS隐藏它并设置父元素的背景图像。这是一个小提琴：http://jsbin.com/garetikubu/edit?html,output 使用onload并将JS作为阻塞脚本放在<head>中很重要。如果您稍后放置脚本（例如在 <body> 的末尾），您可能会遇到浏览器尚未设置 img.currentSrc 的竞争条件。最好等待加载。该示例允许您查看正在下载的原始img。您可以使用一些 CSS 轻松隐藏它。从 2021 年起 image-set() 应用于此目的，根据 CSSTricks。这是建议用于支持所有现代浏览器版本的完整片段： .hero { /* Fallback */ background-image: url("platypus.png"); /* Chrome/Edge/Opera/Samsung, Safari will fallback to this as well */ background-image: -webkit-image-set(url("platypus.png") 1x, url("platypus-2x.png") 2x); /* Standard use */ background-image: image-set(url("platypus.png") 1x, url("platypus-2x.png") 2x); } 使用 <picture> 元素的类似解决方案：教程在这里教程案例：我怀疑如果我在较小的屏幕尺寸上使用相同的图像，我的图像的主要主题可能变得太小。我想显示不同的图像（更集中于主要主题）不同的屏幕尺寸，但我仍然想显示单独的资源基于设备像素比的相同图像，我想自定义基于视口的图像的高度和宽度。示例代码： <picture> <source media="(max-width: 20em)" srcset="images/small/space-needle.jpg 1x, images/small/space-needle-2x.jpg 2x, images/small/space-needle-hd.jpg 3x"> <source media="(max-width: 40em)" srcset="images/medium/space-needle.jpg 1x, images/medium/space-needle-2x.jpg 2x, images/medium/space-needle-hd.jpg 3x"> <img src="space-needle.jpg" alt="Space Needle"> </picture> 如果您使用 Foundation 框架 (https://foundation.zurb.com/)，您可以使用 Interchange 插件： <div data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]"> </div> https://foundation.zurb.com/sites/docs/interchange.html#use-with-background-images 基于 @Weston 的回答，我构建了一个更通用的 jQuery 解决方案，您基本上只需复制粘贴 JS 和 CSS 并专注于 HTML 部分;) TL;DR - 小提琴：https://jsfiddle.net/dpaa7oz6/ CSS ...确保加载时图像几乎不可见 .srcSet{ position: fixed; z-index: 0; z-index: -1; z-index: -100; /* you could probably also add visibility: hidden; */ } JS / jQuery 此脚本将遍历所有具有 srcSet 类的图像并绑定 load 事件，该事件采用 currentSrc（如果不支持则为 src）并将其作为 background-image CSS 放置到带有 bgFromSrcSet 最接近的父级类。这本身还不够！因此它还在windowload事件上放置了一个间隔检查器来测试加载事件是否已完成，如果没有完成，则会触发它们。（imgload事件经常触发仅在第一次加载时，在后续加载时，可以从缓存中检索图像源，导致img加载事件NOT被触发！） jQuery(function($){ //ON DOCUMENT READY var $window = $(window); //prepare window as jQuery object var $srcSets = $('.srcSet'); //get all images with srcSet clas $srcSets.each(function(){ //for each .srcSet do... var $currImg = $(this); //prepare current srcSet as jQuery object $currImg .load(function(){ //bind the load event var img = $currImg.get(0); //retrieve DOM element from $currImg //test currentSrc support, if not supported, use the old src var src = img.currentSrc ? img.currentSrc : img.src; //To the closest parent with bgFromSrcSet class, //set the final src as a background-image CSS $currImg.closest('.bgFromSrcSet').css('background-image', "url('"+src+"')"); //remove processed image from the jQuery set //(to update $srcSets.length that is checked in the loadChecker) $srcSets = $srcSets.not($currImg); $currImg.remove(); //remove the <img ...> itself }) ; }); //window's load event is called even on following loads... $window.load(function(){ //prepare the checker var loadChecker = setInterval(function(){ if( $srcSets.length > 0 ) //if there is still work to do... $srcSets.load(); //...do it! else clearInterval(loadChecker); //if there is nothing to do - stop the checker }, 150); }); }); HTML ...可能看起来像这样： <div class="bgFromSrcSet"> <img class="srcSet" alt="" src="http://example.com/something.jpeg" srcset="http://example.com/something.jpeg 5760w, http://example.com/something-300x200.jpeg 300w, http://example.com/something-768x512.jpeg 768w, http://example.com/something-1024x683.jpeg 1024w, http://example.com/something-1000x667.jpeg 1000w" sizes="(max-width: 2000px) 100vw, 2000px" > Something else... </div> 注意：类bgFromSrcSet必须不设置为img本身！只能设置为 img DOM 父树中的元素。我使用了名为 bg-set 的 Lazysizes 插件来添加对背景图像的响应能力。它的工作原理与 srcset 类似，并根据设备宽度提供一组多个背景图像。 <div class="lazyload" data-bgset="image-200.jpg 200w, image-300.jpg 300w, image-400.jpg 400w" data-sizes="auto"> data-bgset 中的图像是相同的，我们只是提供浏览器可以选择的宽度指定图像。

html css background-image srcset

回答 10 投票 0

自定义 Tailwind 背景图像适用于特定图像，不适用于其他图像

我使用 React、NextJS 和 Tailwind。我想使用一些图像作为一些卡片元素的背景。我首先将图像名称存储在数组中。 const 符号 = ['boat_2.png', 'boat.png', 'tortue.jpg...

reactjs tailwind-css background-image

回答 1 投票 0

background-image 相关问题

最新问题