如何将图像设置为div

时间:2013-09-22 12:47:16

标签: html css

我正在尝试将图像放入div但出现问题,实际上我只是想在将图像设置为div时它不应该影响div属性。

我这样想:

#image_try {
    background-color: white;
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
    -webkit-border-radius: 12px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background: -webkit-gradient(linear, left top, left bottom, 
       color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
    background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
    float: right;
    border: 2px;
    color: #FF0000;
    overflow: hidden;
    width: 164px;
    display: table;
    margin: 0 auto;
    padding: 78px 31px 7px 233px;
    background: #FFFFFF;
    height: 79px;
    margin-top: -174px;
    margin-right: 25px;
    background-image:url(images/weather.jpg) no-repeat;
  }

更新

Actualy当我没有在背景中设置图像时,div看起来很好但是当我设置图像时它的高度和宽度受到影响

任何想法......答案将完全体会...谢谢

1 个答案:

答案 0 :(得分:1)

我可以在你的CSS中看到很少的背景,你使用颜色两次,你也将它设置为渐变为Chrome和Firefox。你也在重复保证金。据我所知,你的问题是padding。我只删除了那个。请检查css并尽可能提供屏幕截图。

#image_try {
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
border: 2px;
color: #FF0000;

width: 164px;

height: 79px;
background-image:url(images/weather.jpg) no-repeat;
}

尝试以上编辑的答案