blocks|key|721344|text|<div+class="foo">Foo+Bar</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|721345|在你的CSS文件中：|unstyled|721346|.foo+{
++++background-image:+url("images/foo.png");
}|721347|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>&lt;div class="foo"&gt;Foo Bar&lt;/div&gt;
</code></pre>

<p>and in your CSS file:</p>

<pre><code>.foo {
    background-image: url("images/foo.png");
}
</code></pre>


blocks|key|721372|text|使用like+..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|721373|<div+style="background-image:+url(../images/test-background.gif);+height:+200px;+width:+400px;+border:+1px+solid+black;">Example+of+a+DIV+element+with+a+background+image:</div>
<div+style="background-image:+url(../images/test-background.gif);+height:+200px;+width:+400px;+border:+1px+solid+black;">+</div>|code-block|syntax|javascript|721374|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use like ..</p>

<pre><code>&lt;div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"&gt;Example of a DIV element with a background image:&lt;/div&gt;
&lt;div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"&gt; &lt;/div&gt;
</code></pre>


blocks|key|937123|text|你是说这个吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|937124|<style+type="text/css">
.bgimg+{
++++background-image:+url('../images/divbg.png');
}
</style>

...

<div+class="bgimg">
++++div+with+background
</div>|code-block|syntax|javascript|937125|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You mean this?</p>

<pre><code>&lt;style type="text/css"&gt;
.bgimg {
    background-image: url('../images/divbg.png');
}
&lt;/style&gt;

...

&lt;div class="bgimg"&gt;
    div with background
&lt;/div&gt;
</code></pre>


blocks|key|937174|text|您可以简单地添加一个id为img+src的属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|937175|<body>
<img+id="backgroundimage"+src="bgimage.jpg"+border="0"+alt="">
</body>|code-block|syntax|javascript|937176|在CSS文件中(拉伸背景)：|937177|#backgroundimage
{
+++height:+auto;
+++left:+0;
+++margin:+0;
+++min-height:+100%25;
+++min-width:+674px;
+++padding:+0;
+++position:+fixed;
+++top:+0;
+++width:+100%25;
+++z-index:+-1;
}|937178|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can simply add an img src Attribute with id:</p>

<pre><code>&lt;body&gt;
&lt;img id="backgroundimage" src="bgimage.jpg" border="0" alt=""&gt;
&lt;/body&gt;
</code></pre>

<p>and in your CSS file (stretch background):</p>

<pre><code>#backgroundimage
{
   height: auto;
   left: 0;
   margin: 0;
   min-height: 100%;
   min-width: 674px;
   padding: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: -1;
}
</code></pre>


blocks|key|721459|text|<div+id="image">Example+to+have+Background+Image</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|721460|我们需要在Style标签中添加以下内容：|unstyled|721461|.image+{
++background-image:+url('C:\Users\ajai\Desktop\10.jpg');
}|721462|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>&lt;div id=&quot;image&quot;&gt;Example to have Background Image&lt;/div&gt;
</code></pre>
<p>We need to Add the below content in Style tag:</p>
<pre class="lang-css prettyprint-override"><code>.image {
  background-image: url('C:\Users\ajai\Desktop\10.jpg');
}
</code></pre>


blocks|key|721510|text|在大多数情况下，该方法与设置全身相同|type|unstyled|depth|inlineStyleRanges|entityRanges|data|721511|.divi{
++++background-image:+url('path');
}

</style>

<div+class="divi"></div>|code-block|syntax|javascript|721512|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>For the most part, the method is the same as setting the whole body<br>
 </p>

<pre><code>.divi{
    background-image: url('path');
}

&lt;/style&gt;

&lt;div class="divi"&gt;&lt;/div&gt;
</code></pre>


<p>Is it possible to make a <code>&lt;div&gt;</code> element contain a background image, and if so, how would I go about doing this?</p>


Adding a background image to a <div> element

可以让<div>元素包含背景图像吗?如果可以，我该如何着手呢？

问向<div>元素添加背景图像
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向<div>元素添加背景图像EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向<div>元素添加背景图像
EN