Question

我试图在div的右上角显示背景非重复图片。我使用以下代码

<html>
    <head>
    <style>
       .UseA
           {
             display:block;

             /* Display image in the top left corner */
             background-image:url('paper.gif');
             */--------------------------------------*/

             text-indent:10px;
             border-radius: 10px;
             background: #BADA55;
             min-height:50px;
             width:300px;

           }
           .UseA .dta
           {
             display:block;
             border-radius: 10px;
             width:130px;
             background-color:grey;
             color:white;
             position:relative; /*Relative to normal position*/
             left:160px; /*Move away from left*/
           }
    </style>
    </head>
  <body>    

        <div class="UseA">
                Hello , My name is Jim 
                         <div class="dta">something here</div>
        </div>

  </body>
 </html>

但是没有显示图像。我正在尝试使用此代码here有关我可能做错的任何建议吗？

Answer 1

您在背景图片后声明background: #BADA55;，因此它会覆盖它。试试这个：

UseA {
  display:block;
  text-indent:10px;
  border-radius: 10px;
  background: #BADA55 url('paper.gif') no-repeat top right;
  min-height:50px;
  width:300px;
}

Answer 2

您正在使用background-image覆盖background。结合它们：

http://jsfiddle.net/isherwood/ANr6K/

background: url('image.png') right top no-repeat #BADA55;

Answer 3

如果您的paper.gif资产正确无误，请删除.UseA

的背景颜色

      .UseA
       {
         display:block;

         /* Display image in the top left corner */
         background-image:url('paper.gif');
         */--------------------------------------*/

         text-indent:10px;
         border-radius: 10px;
         background: #BADA55;
         min-height:50px;
         width:300px;

       }

更改为

.UseA      
{
         display:block;

         /* Display image in the top left corner */
         background-image:url('paper.gif');
         */--------------------------------------*/

         text-indent:10px;
         border-radius: 10px;
         min-height:50px;
         width:300px;

       }

使用Google图片作为背景的小提琴上的示例：http://jsfiddle.net/C9qdL/

CSS - Div背景图像未显示

3 个答案: