1

你如何设置背景div？我有一个看起来像这样的块：` 

<div class="span4">
   <font color="000000">
      <h4 class="text-center">This is the title</h4>
      <p>This is my text</p>
      <a href="#" class="btn btn-success">
      <i class="icon-star icon-white"></i> This is my button</a>
   </font>
</div>

我想让整个块有一个背景图像，但是当我尝试时（我已经尝试了 6 种不同的方法），它要么根本不起作用，要么不填满整个框，要么填满整个页面。

使用 JoshC 的 CSS 相关答案后，我遇到了这个问题。在图像中你可以看到我的背景，但它并没有延伸到我想要的整个区域。与“主页”上蓝色突出显示的左边缘一样远的侧栏是一个不同的图像（尚未设置），其余部分将是显示的图像。 这是图像

我想要的另一件事是应用于多个 div 的背景，但不是全部，但这是可选的......

任何帮助深表感谢。

4

4 回答 4

0

应用background-image这样的：

.span4 {
    background-image: url(http://example.com/image.png);
}

jsFiddle 演示

或.. HTML 中的样式如下：

<div class="span4" style="background-image: url(http://example.com/image.png);"></div>

jsFiddle 演示

您显然必须将 URL 更改为存在的图像。

在此处查看属性的规格background：https ://developer.mozilla.org/en-US/docs/Web/CSS/background-image

于 2013-09-28T04:32:25.907 回答
0 
.span4
{
background-image:url('your image path');/* by this image set*/
background-color:#cccccc;/* and can use color*/
}
于 2013-09-28T04:32:44.833 回答
0

你可以给这样的东西：
<div class="span4" style="background:url(../Pictures/website.png) no-repeat fixed;">

于 2013-09-28T04:34:50.143 回答
0

我们要扭曲你的头一秒钟。div 就像没有边框的盒子，除了 100% 宽度之外没有任何自定义样式。

您正在将表格行 HTML3 标准结构与 HTML5 div 的性质相结合。在最新的代码中不包含像过去表格单元格那样的属性。

我们今天将通过绑定到 ID 或类的 CSS 来调用存在于 DOM 中的那些元素来实现这一点。

css

<style type="text/css">
.span4{ background-image:url('images/myimage.jpg'); 
        background-repeat:no-repeat; 
        width:100px; height:100px; }

     .span h4{ color:#000; text-align:center; }
     .span4 p{ font-weight:bold; /*or whatever*/}

     .span4 a{ font-style:italic; color:#0f0; }
         .span4 a:hover{}
         .span4 a:active{}
         .span4 a:visited{}

             .span4 a.btn{ color:blue; }
             .span4 a.btn-success{ color:green; }
                 .span4 a.btn.btn-success

    .icon-star:before{ content: '* '; } 
    .icon-white:before{ color:#fff; }
</style>

html

<div class="span4">
    <h4>This is the title</h4>
    <p>This is my text</p>
    <a href="#" class="icon-star icon-white">This is my button</a>
</div>`
于 2013-09-28T04:47:20.357 回答