Question

我正在尝试创建一个div容器。我需要使用透明图片作为背景，在div中包含单独的图片和一些文本。我做了以下事情：

＆＃13;

div {
  width: 500px;
  height: 500px;
  background-image: url('explore_block.png');
}

＆＃13;

<div> 
  <img src="img_girl.jpg" alt="icon">
  <p>This paragraph has its own background color.</p>
</div>

＆＃13;

我知道如何设置背景，因为我已经检查了exisitng问题。这里的问题是，即使我认为我正在以正确的方式做，背景也不会出现。图像的路径是正确的，我已经测试过了。你能提供任何帮助吗？谢谢！:)

Answer 1

这很简单。在背景图像之后你留下了一个双冒号。 ;）它现在有效。

  <head>
  <style>
  div {
      width:500px;
      height:500px;
      background-image: url('explore_block.png');
  }
  </style>
  </head>


 <body>
 <div> 
 <img src="img_girl.jpg" alt="icon">
 <p>This paragraph has its own background color.</p>
 </div>
 </body>


 </html>

Answer 2

棘手的，你能尝试使用

吗？

background-size: cover

看看情况如何，没有视觉表现很难看到：）

Answer 3

在' url内-img还div { width: 500px; height: 500px; background: url(explore_block.png); }

M:S.MS

工作小提琴：https://jsfiddle.net/9acajpkk/2/

Answer 4

尝试将以下CSS添加到div中。

div {
  width: 500px;
  height: 500px;
  background-image: url("explore_block.png");
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

＆＃13;

<div> 
  <img src="img_girl.jpg" alt="icon">
  <p>This paragraph has its own background color.</p>
</div>

＆＃13;

this.searchControl.valueChanges
        .debounceTime(2000)
        .subscribe(search => this.getCities(search));

＆＃13;

Answer 5

你的html和css工作正常..给出正确的图像路径并再次检查。

有/没有（撇号）' '也可以。

工作Jsfiddle

https://jsfiddle.net/klakshman318/koh7dx5z/1/

Answer 6

Try this: 
<html>
<head>
<style type="text/css">
div {
  width: 500px;
  height: 500px;
  background-image: url('backgroundimg.jpg');
}
</style>
</head>
<body>
<div> 
  <img src="logo.jpg" alt="icon">
  <p>This paragraph has its own background color.</p>
</div>
</body>
</html>

为什么背景图片不会显示在div容器中？

6 个答案: