background-image 相关问题

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

更改背景图像不透明度

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

回答 9 投票 0

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

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

回答 1 投票 0

CSS 的background-image 属性不起作用

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

回答 3 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

使背景图片适合div

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

回答 0 投票 0

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

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

回答 3 投票 0

背景图像全宽和全高

我正在为网站设置横幅。横幅由图像和其顶部的一些文本组成,代码如下: .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>

回答 0 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

背景图像未出现在转换为 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; }

回答 1 投票 0

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

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

回答 8 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

定位背景图片,添加填充[重复]

我想向 div 添加背景,位置位于右中心,但是!,对图像进行一些填充。 div 有文本填充,所以我想稍微缩进背景。 可能让我...

回答 7 投票 0

双背景但仅指定一个

我正在尝试学习 html 但我遇到了这个问题: 我不知道为什么,但我的背景无缘无故地重复...这是我的CSS主体(因为问题似乎与主体有关),如果我p...

回答 1 投票 0

如何在swift中使用URL为视图设置背景图像[关闭]

我正在我的应用程序中使用 swift 2.2 开发一个应用程序,我需要将背景图像添加到从 URL 获取的视图中,我知道如何添加到 imageview,但无法添加到视图。

回答 3 投票 0

让背景图片不透明的方法

我的意思是我的代码, 我的意思是我的代码, <body style=" background-image: url('https://i1.sndcdn.com/artworks-000030364386-yrh8p5-t500x500.jpg'), url('https://media.tenor.com/x8v1oNUOmg4AAAAM/rickroll-roll.gif'); background-blend-mode:multiply; background-repeat: no-repeat; background-size: contain; background-position:center; "></body> 这不是我目前正在做的事情,但与我的代码中的内容类似,但我想给单个背景图像一个不透明度,其中任何一个,我想限制我使用多个背景图像,但如果我会这是唯一的方法。 我已经尝试过<body style="url('https://i1.sndcdn.com/artworks-000030364386-yrh8p5-t500x500.jpg',0.5)但无济于事,它不起作用,我尝试过寻找它,但找不到答案。我希望一张背景图像部分不可见。 此外,该代码只是我正在从事的一个严肃项目的模因版本。 您可以使用伪元素实现具有不透明背景图像的效果。此方法允许您对一张背景图像应用不透明度,同时保持其他图像不受影响。具体方法如下: <body> <div class="background"></div> </body> body { position: relative; overflow: hidden; /* Prevents overflow from the pseudo-element */ } .background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://i1.sndcdn.com/artworks-000030364386-yrh8p5-t500x500.jpg'); opacity: 0.5; /* Adjust opacity here */ z-index: 1; /* Ensures it's behind other content */ } body { background-image: url('https://media.tenor.com/x8v1oNUOmg4AAAAM/rickroll-roll.gif'); background-blend-mode: multiply; background-repeat: no-repeat; background-size: contain; background-position: center; z-index: 0; /* Ensures this background is on top */ } 说明: 伪元素:通过创建<div class="background">,您可以将其设置为覆盖整个身体并对其应用不透明度。 Z-Index:调整z-index可确保背景图像的正确堆叠顺序。 灵活性:您可以轻松调整特定背景图像的不透明度,而不影响其他图层。 这种方法可以保持 HTML 干净,并可以更好地控制背景。

回答 1 投票 0

CSS:响应式背景图片高度

我正在使用这个CSS: 。裹 { 最大宽度:1400px; 最小宽度:768px; 宽度:100%; background-repeat:不重复滚动; 背景位置:中心顶部; 位置:相对; 玛...

回答 5 投票 0

是否有更有效的方法来在滑块中加载和显示多个背景图像

我目前在JavaScript中有一个imageslider函数,当用户单击媒体箭头时,它可以将一个图像切换为另一个图像..它工作正常,但是第一次加载每个图像时有一个延迟

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.