background-image 相关问题

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

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

background-image quarto reveal.js

回答 1 投票 0

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

无法从 React 中的资源文件夹导入背景图片

我正在尝试让我的 React 应用程序在 css 中渲染背景图像。我需要这个，因为我想使用 css 查询来获取不同屏幕尺寸的不同背景图像。然而，React 是不...

css reactjs background-image

回答 1 投票 0

为什么我的网络请求中没有出现图像加载请求？

我需要有关浏览器（Chrome/FF）如何加载 CSS 图像的解释。根据我目前的了解，CSS 使用的图像作为背景图像，作为请求出现在网络选项卡中，并根据 CSS

css google-chrome-devtools background-image firefox-developer-tools

回答 2 投票 0

浏览器如何使用 CSS 图像？

我需要解释一下，浏览器（Chrome/FF）如何加载CSS图像。根据我目前的了解，CSS使用的图像作为背景图像，作为请求出现在网络选项卡中，并根据CSS...

css google-chrome-devtools background-image firefox-developer-tools

回答 2 投票 0

android studio编辑器可以设置图片背景吗？

我想自定义android studio编辑器背景，所以我想将图像设置为编辑器，是否可能，是否有任何选项可以执行此操作。？

android android-studio background-image android-theme

回答 4 投票 0

有没有办法将background-image设置为base64编码图像？

我想在JS中动态更改背景，并且我的图像集采用base64编码。我尝试： document.getElementById("bg_image").style.backgroundImage = “网址（'http://amigo.com/300107-2853.j...

javascript base64 background-image

回答 11 投票 0

如何同时使用图像、描边和阴影设置文本样式

我不想用背景图像、文本笔画和文本阴影来设计文本。我的问题是文本阴影位于背景图像之上。有谁知道我怎样才能把...

css text background-image text-shadow

回答 1 投票 0

如何将导航菜单放置在背景图像下方的标题中？

牙科样本页面示例 HTML：牙科页面 ... 示例 HTML： <header id="banner"> <h1>Dentistry Page</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="Services/services.html">Services</a></li> <li><a href="About/about.html">About</a></li> <li><a href="Contact/contact.html">Contact</a></li> </ul> </nav> </header> CSS 示例： header { background-image: url(Images/Homepage-Feature-Image-Mobile.jpg); height: 250px; background-repeat: no-repeat; background-position: center; margin: 1em; padding: 1em; grid-area: header; } nav ul { margin: 0px; padding: 0px; list-style-type: none; display: flex; justify-content: center; align-items: flex-end; } nav ul li a { display: block; border: 1px solid; border-radius: .5em; padding: .25em; margin: .5em; } 到目前为止，我在尝试了几种不同的组合后得到了上面的代码。我试图将导航菜单置于背景图像下方，但仍在标题元素内。我尝试了几种不同的风格，但发现这最接近我正在寻找的风格。代码可能很混乱，因为这是我的第一个项目，我刚刚学习，但我似乎无法在任何地方找到答案。我希望将菜单放在背景图片下方。如果容器内有一个元素（例如 div 或 header），并且您将背景应用于该容器，则只要该元素位于该容器中，就无法将该元素移动到背景下方。如果您想将导航栏保留在标题内，则必须在标题内创建一个专门应用背景的 div，然后该 div 之后的任何内容都将显示在下方。 <header id="banner"> <div id='background'> <h1>Dentistry Page</h1> </div> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="Services/services.html">Services</a></li> <li><a href="About/about.html">About</a></li> <li><a href="Contact/contact.html">Contact</a></li> </ul> </nav> </header> #background { background-image: url(Images/Homepage-Feature-Image-Mobile.jpg); height: 250px; background-repeat: no-repeat; background-position: center; margin: 1em; padding: 1em; grid-area: header; } nav ul { margin: 0px; padding: 0px; list-style-type: none; display: flex; justify-content: center; align-items: flex-end; } nav ul li a { display: block; border: 1px solid; border-radius: .5em; padding: .25em; margin: .5em; }

html css flexbox background-image display

回答 1 投票 0

如何将图像放在搜索栏的背景中？

这是我在这里的第一篇文章。我是一名自学成才的开发人员，我真的很想学习如何将图像放在搜索栏的背景中。我可以想象 HTML 不适合，但我不懂 CSS...

html css image background-image searchbar

回答 1 投票 0

将图像放在 WP、WooCommerce“商店”页面的标题后面

我可能错过了一些简单的东西，但是...... 我有一个使用 WordPress 创建的网站，上面有一个 WooCommerce 商店。我想在横幅中的“商店”文本后面放置一个图像...

wordpress image woocommerce background-image

回答 1 投票 0

知道全屏背景图像的良好 CSS 技术吗？

我在网上浏览并尝试了各种方法来解决这个问题，但还没有找到一种适合我的技术。我希望我的网站背景图片居中，填满整个