background-image 相关问题

添加背景图像使用CSS

HTML代码：<header id="masthead" class="site-header" role="banner"> <div class="header-shadow"></div> <hgroup></hgroup> <nav role="navigation" class="site-navigation main-navigation"> </nav><!-- .site-navigation .main-navigation --> </header><!-- #masthead .site-header --> CSS： .header-shadow{ background-image: url('../images/header-shade.jpg'); } additional信息： 这是一个带有阴影的图像，我在网站的顶部使用它，因此它一定没有特定的宽度。 您需要添加一个背景图像以正确显示。 例如， width 当您提到的是将其用作阴影，您可以删除height并添加.header-shadow{ background-image: url('../images/header-shade.jpg'); width: XXpx; height: XXpx; } （如果需要时垂直或水平的）。 例如， width PS：XX是一个虚拟值。您需要用图像的实际值替换它。 指定高度和宽度： background-repeat 这是因为.header-shadow{ background-image: url('../images/header-shade.jpg'); background-repeat: repeat-y; /* for vertical repeat */ background-repeat: repeat-x; /* for horizontal repeat */ height: XXpx; } 是空的。 add.header-shadow{ background-image: url('../images/header-shade.jpg'); height: 10px; width: 10px; } ： .header-shadow 在这里fid .CSS文件的ADD高度和宽度属性。 使用图像用于CSS中的身体背景 height 您也可以尝试将类设置为DIV部分： .header-shadow{ background-image: url('../images/header-shade.jpg'); background-color: red; height: 50px; } body { background-image: url("image.jpg"); } 使用：/** CSS **/ .content { background: url('http://www.gransebryan.com/wp-content/uploads/2016/03/bryan-ganzon-granse-who.png') center no-repeat; } .displaybg { text-align: center; color: #FFF; } <div class="content"> <p class="displaybg">This is just a test</p> </div>.content { background: url('http://www.gransebryan.com/wp-content/uploads/2016/03/bryan-ganzon-granse-who.png') center no-repeat; } .displaybg { text-align: center; color: #FFF; } .BgDivClass{ width:160px; height:160px; background-image: url('https://www2.0zz0.com/2025/03/18/07/615680095.png');

如何在HTML段落中插入图像 +文本超链接？ 我有以下设置：

我有以下设置： <p> some text.... </p> <a href="..." class="redirect"> <span class="redirect-image"></span> <span class="read-more">Read more...</span> </a> <...

add背景图像到Squarespace网站标题

用JavaScript创建随机噪声背景图像（PNG）的方法？

尽管检查了常见问题，背景图像仍不显示

我正在使用css中的background-image上传图像，尽管确保文件路径正确并用另一个图像替换原始图像以查看原始图像是否有问题，...

获取图像src，然后将其用于div背景javascript

<div id="slides"></div> <div id="slidermenu"> <img class="slidermenuimage" src="red.png" onclick="showslide()"/><br> <img class="slidermenuimage" src="orange.png" onclick="showslide()"/><br> <img class="slidermenuimage" src="yellow.png" onclick="showslide()"/><br> </div> <script> function showslide() { y = document.getElementById("slides"); y.style.display = "block"; z = this.src; y.backgroundImage = 'url('+z+')'; } </script> 当有人单击其中一张图像时，我希望该图像显示为 div“幻灯片”的背景图像，并且不确定出了什么问题。也许我没有正确使用“这个”。 不要使用它，而是将事件传递到您的函数中。然后使用 event.target 您还需要使用 y.style.backgroundImage 您遗漏了 .style 默认情况下幻灯片 div 的高度为 0px，因此您需要设置一个高度才能看到背景图片。 请参阅代码片段中我的编辑注释以进行特定编辑。 // EDIT add event as a parameter // function showslide() { function showslide(event) { y = document.getElementById("slides"); y.style.display = "block"; // EDIT Use event.target instead of this // z = this.src; z = event.target.src; // EDIT You need .style // y.backgroundImage = 'url('+z+')'; y.style.backgroundImage = 'url('+z+')'; } /* EDIT slides needs a height so you can see the background image */ #slides { height: 100px; } /* EDIT For the demo */ .slidermenuimage { margin: 1rem; width: 64px; } <div id="slides"></div> <div id="slidermenu"> <img class="slidermenuimage" src="https://placebear.com/400/400.jpg" onclick="showslide(event)"/><br> <img class="slidermenuimage" src="https://placebear.com/401/400.jpg" onclick="showslide(event)"/><br> <img class="slidermenuimage" src="https://placebear.com/402/400.jpg" onclick="showslide(event)"/><br> </div>

更改背景图像不透明度

我有一个带有文本块的 div 元素和一个父 div，我在其中设置了背景图像。现在我想降低背景图像的不透明度。我怎样才能做到这一点？ 编辑： 我正在寻找...

如何在ImageBackground组件中定位图像？

我只想使用 React Native 的 ImageBackground 组件将此图像放置到屏幕顶部，使用此背景图像 resizeMode='contain' （不是覆盖），因为图像适合尺寸...

CSS 的background-image 属性不起作用

目录： 索引.html 图片 （在图像文件夹内）Logo.png CSS .landing-page_logo{ 显示：块； 背景图像: url("Images/Logo.png"); 宽度：300px； 高度：300...

背景图像属性不起作用，我做错了什么？

我一直在努力让我的背景图像在CSS中工作。我知道背景颜色会覆盖背景图像属性。 身体 { 背景图片: url("images/Body-image.png&qu...

背景图像没有响应，当我调整浏览器大小时会变大

我正在开发一个网站，该网站的部分一侧有文本，另一侧有背景图像。在某一部分一切工作正常。当我调整浏览器大小时，背景图像是

使背景图片适合div

我在下面的div中有一个背景图像，但图像被切断：

如何在CSS中结合背景图片+线性渐变？背景图像上的线性渐变

祝你们一切顺利。 所以我有一个带有背景图像的部分，我想在背景图像上添加线性渐变。 我想要的结果： 到目前为止，我有一个带背景的 div

背景图像全宽和全高

我正在为网站设置横幅。横幅由图像和其顶部的一些文本组成，代码如下： .banner_div{ </desc> <question vote="2"> <p>我正在为一个网站设置横幅。横幅由图像和其顶部的一些文本组成，代码如下：</p> <pre><code>&lt;div class=&#34;banner_div&#34;&gt; &lt;style&gt; .banner_div{ background-image: url(/images/banner.jpg); width: 100%; height: 100%; background-size: contain; } &lt;/style&gt; &lt;p class=&#34;banner_text&#34;&gt;Line 1&lt;/br&gt;Line 2&lt;/p&gt; &lt;/div&gt; </code></pre> <p>我需要的是图像覆盖屏幕的整个宽度（即使屏幕比图像宽，在这种情况下图像应该拉伸）并且div的高度相应地缩放以便图像完全显示。我怎样才能做到这一点？我尝试了<pre><code>background-size</code></pre>的每个属性，但没有用...</p> <p>编辑：当前的问题是高度与文本的高度成比例</p> </question> <answer tick="false" vote="3"> <p>我对你的问题有更好的解决方案。</p> <p>问题是因为您没有给出 HTML、BODY 的高度。 如果你给出了高度，这个问题就可以解决，不需要添加位置元素，将来会出现一些对齐问题</p> <p><strong>解决方案</strong></p> <p>HTML</p> <pre><code>&lt;div class=&#34;banner_div&#34;&gt; &lt;p class=&#34;banner_text&#34;&gt;Line 1&lt;/br&gt;Line 2&lt;/p&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code>html,body{ height:100%; margin:0; padding:0; } .banner_div{ background-image: url(http://picsum.photos/100/100); background-size: cover; background-position: center; width:100%; height:100%; } .banner_text{ margin:0; padding:20px; }</code></pre> <pre><code>&lt;div class=&#34;banner_div&#34;&gt; &lt;p class=&#34;banner_text&#34;&gt;Line 1&lt;/br&gt;Line 2&lt;/p&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="true" vote="2"> <p>尝试以下解决方案：</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code>body, html { margin:0; padding:0; } .banner_div { background-image: url(http://picsum.photos/100/100); position:absolute; top:0; left:0; right:0; bottom:0; background-size:cover; background-position: center; }</code></pre> <pre><code>&lt;div class=&#34;banner_div&#34;&gt; &lt;p class=&#34;banner_text&#34;&gt;Line 1&lt;/br&gt;Line 2&lt;/p&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>首先使用16:9的图像以获得更好的效果：</p> <p>然后使用 <pre><code>img</code></pre> 标签本身，</p> <p>在不考虑宽高比的情况下缩放图像对于横幅来说可能看起来不太好，因此我们使用 <pre><code>width:100%</code></pre> 和 <pre><code>height:auto</code></pre> 来保留横幅比例。 大多数屏幕都使用 16:9 比例，所以如果你有 16:9 的图像应该会很好</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>body, html { margin: 0px; padding: 0px; height: 100%; } .banner{ display:block; } .banner img { width: 100%; height: auto; position: relative; } .banner p { float:left; position:absolute; top:0px; }</code></pre> <pre><code>&lt;div class=&#34;banner&#34;&gt; &lt;img src=&#34;https://upload.wikimedia.org/wikipedia/commons/7/7c/Aspect_ratio_16_9_example.jpg&#34; /&gt; &lt;p&gt;Some text here&lt;/p&gt; &lt;/div&gt; Some random text to show other elements wont overlap the banner</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>这个<pre><code>css</code></pre>代码与我一起工作：</p> <pre><code>background-size: 100% 100%; </code></pre> </answer> </body></html>

如何将CSS渐变颜色应用到类似于所附屏幕截图中的组件背景

我们如何使用伪CSS选择器在背景的一侧应用CSS渐变，如下图所示。 在此输入图像描述 我尝试使用线性渐变 css 但它不是......

如何在 Tkinter 中使用背景图像时使输入字段和按钮透明？

我正在开发一个 Tkinter 项目，其中有一个带有背景图像的登录屏幕。我想让“用户名”和“密码”的输入字段透明，所以背景

背景图像未出现在转换为 html 的 pdf 中

我在使用您的转换 API 获取背景图像时遇到问题。 例如模板文件样式： 我在使用您的转换 API 获取背景图像时遇到问题。 例如模板文件样式： <meta charset="utf-8" /> <link href="https://use.typekit.net/mmg2zqw.css" rel="stylesheet" /> <style> body, p, li, td, th, dt, dd { font-family: arboria, sans-serif, arial, helvetica; font-weight: 300; font-style: normal; font-size:20px; color:#333; } body { background: url(/templates/backgrounds/certificate-background.png) no-repeat; } img { border:none; display:block; } p { margin-top:0; font-size: 20px;} span { margin-top:0; font-size: 24px; color: #78BE21;} h1, h2, h3, h4, h5 { font-family: arboria, sans-serif, arial, helvetica; font-weight: 300; font-style: normal; color:#555; } h1 { font-size:68px; margin-top:10px; margin-bottom: 20px; } h2 { font-size:52px; margin-top:5px; margin-bottom: 10px; color: #78BE21; } h3 { font-size:30px; margin-top:5px; margin-bottom: 5px; } h4 { font-size:18px; margin-top:5px; margin-bottom: 0; } h5 { font-size:14px; margin-top:5px; margin-bottom: 0; } 我需要在 api 调用中添加参数才能让图像正常工作吗？ 您是否正在考虑设定最低高度以查看可能的变化？因为如果你的标签不包含任何内容，那么你的背景将不可见。 在你的身体上试试这个： body { background-image: url('/templates/backgrounds/certificate-background.png') no-repeat; width: 100% min-heigth: 500px; }

强制div具有背景图像的大小

在 Div 上使用背景图像时，我无法显示图像的完整高度，也无法使用 height:auto;或高度：100%。为什么会这样呢？ 我该如何解决这个问题？ 我创建了一个 JS F...

为什么精灵背景动画不能正常工作？

我在知道如何进行正确的数学或公式来制作响应式 CSS 精灵时遇到问题。 它是一个边界半径为 50% 的圆。所以它的宽度和 padding-bottom 设置为 100% 以形成圆圈

JavaFX 中的灰色滚动窗格背景图像

我在 JDK 1.8.0_72 的 Eclipse 中使用 JavaFX。我想在滚动窗格的背景中显示图像。我使用以下代码来执行此操作： ScrollPane s2 = new ScrollPane(); s2.setContent(