Question

要在div中创建背景图像，您可以轻松编写

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

...

<div class="bgimg">
    div with background
</div>

我想在没有单独的样式表的情况下这样做。它可能看起来像

<div class="bgimg" background-image="url('../images/divbg.png')">
     div with background
</div>

然而，当我尝试这个时，它不起作用。在没有单独的CSS的情况下在div中设置背景图像？

Answer 1

您需要在background-image代码中设置style。您还必须设置width＆amp; height正常工作。

＆＃13;

<div class="bgimg" style="background-image:url(https://dummyimage.com/200x200/000/fff&text=Background+Image); width: 200px; height: 200px;"></div>

＆＃13;

Answer 2

您应该使用样式元素：

<div class="bgimg" style="background-image: url('../images/divbg.png')"></div>

Answer 3

有两种方法可以执行此操作，您可以使用其中两种方法：

<div class="bgimg" style="background:url('../images/divbg.png');">
</div>

或者您可以使用

.bgimg{height:328px; width:328px;}

要查看背景，请不要忘记将内容添加到div中。

运行以下代码以查看其是否有效：

＆＃13;

    <div class="bgimg" style="background-image:url('https://www.gravatar.com/avatar/89aa49add7f84c840f2d011857353431?s=328&d=identicon&r=PG&f=1);">
    </div>
    <br/ ><br/ ><br/ ><br/ >
    <div class="bgimg" style="background:url('https://www.gravatar.com/avatar/89aa49add7f84c840f2d011857353431?s=328&d=identicon&r=PG&f=1');">
    </div>

＆＃13;

{{1}}

＆＃13;

Answer 4

在div元素中使用style属性使用内联样式。像这样：

<div style="background-image: url('../images/divbg.png')"></div>

请注意，您可能必须删除url（）中的撇号才能使其在Chrome中有效。

Answer 5

您可以使用内联CSS设置背景图像，并且无需单独的css块或文件：

 <div style="background-image: url('../images/divbg.png')"></div>

Answer 6

如果您使用 jQuery ，可以在document.ready上执行此操作：

仍然......建议使用CSS

段：

$(document).ready(function() {

  $('.bgimg[background-image]').each(function() {
    $(this).css('background-image', $(this).attr('background-image'));
  })
})

.bgimg {
  min-height: 100px;
  background-repeat:no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bgimg" background-image="url('http://lorempixel.com/400/100/?0')">
  div with background
</div>
<div class="bgimg" background-image="url('http://lorempixel.com/400/100/?1')">
  div with background
</div>
<div class="bgimg" background-image="url('http://lorempixel.com/400/100/?2')">
  div with background
</div>

在没有单独的CSS的Div中设置背景图像

6 个答案: