如何在 div 中使用背景图像?

哈利波特

我在向 div 添加图像时遇到问题。我的文件和图像都在同一个文件夹中,图像是 jpg。我也尝试将在线图片链接(http://www.aussieinfrance.com/wp-content/uploads/stockholm-4.jpg)放入,但没有成功。这是我的 html 文件:

<!DOCTYPE html>
    <html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
       <body>
            <div class="topnav" id="myTopnav">
  <a class="active" href=“#home”>Sweden</a>
  <a href=“government.html”>Government</a>
  <a href=“borders.html”>Borders</a>
  <a href="#about">Iconography</a>
</div>
<div class="overview" id="overview">
<p>Sweden is a northern country that specializes in trading machinery, paper products, and iron and steel products</p>
</div>
</body>
</html

这是我的 css 文件:

/* Add a black background color to the top navigation */
.topnav {
    background-color: #262228;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Style the links inside the navigation bar */
.topnav a {
    font-family: verdana;
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 25px 27px;
    text-decoration: none;
    font-size: 19px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #FFCE00;
    color: white;
}

body {
  margin: 0;
  padding: 0;
  font-family: verdana;
}

.overview p {
    font-size: 20px;
    padding-top: 30px;
    padding-right: 50px;
    padding-left: 550px;
    color: #262228;
    text-align: right;
}

.overview {
      background-image: url(“stockholm.jpg”);
}
技巧
  1. 在 CSS指令中使用纯引号"而不是印刷引号“”url
  2. 在 CSS 中,图像的路径是相对于 CSS 文件而不是 HTML 文件指定的。因此请确保图像与 CSS 文件位于同一文件夹中。
  3. 尝试使用./stockholm.jpg而不是stockholm.jpg.

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在React.JS中使用``onclick''功能更改特定div的背景图像

来自分类Dev

如何在Javascript中使用条件更改Div的背景图像

来自分类Dev

如何使用ng-style设置div的背景图像

来自分类Dev

如何使用动画更改div背景图像

来自分类Dev

如何使用javascript更改div的背景图像?

来自分类Dev

如何使用CSS在DIV标签上添加背景图像

来自分类Dev

如何使用javascript更改div的背景图像?

来自分类Dev

如何使用动画更改div背景图像

来自分类Dev

CSS:如何在div中模糊背景图像?

来自分类Dev

如何在TImage上显示Div背景图像

来自分类Dev

CSS:如何在div中模糊背景图像?

来自分类Dev

如何在div元素上转换多个背景图像?

来自分类Dev

如何在TImage上显示Div背景图像

来自分类Dev

如何使div背景图像响应

来自分类Dev

如何使div背景图像响应?

来自分类Dev

如何在没有背景图像的情况下使用CSS 3模糊div下的div?

来自分类Dev

如何在没有来自父div的背景图像的情况下让子div

来自分类Dev

如何在包含背景图像的空div上覆盖div?

来自分类Dev

如何在媒体查询中使用 API 返回的图像作为背景图像?

来自分类Dev

如何在媒体查询中使用 API 返回的图像作为背景图像?

来自分类Dev

如何在具有背景尺寸的div上缩放背景图像

来自分类Dev

使用角度,如何更改div的背景图像以匹配用户对象的profileImage属性?

来自分类Dev

如何使用CSS为div的背景图像设置不透明度或降低亮度

来自分类Dev

如何使用可缩放的全尺寸背景图像制作3个div

来自分类Dev

如何使用背景图像后面的引导程序将 <div> 放在中心上方?

来自分类Dev

如何仅使用 CSS 在单独的 div 中切换背景图像

来自分类Dev

如何在旋转图像CSS或Javascript时使背景图像填充空白(在div上)?

来自分类Dev

使用背景图像保持 div 的纵横比

来自分类Dev

如何检查div包含哪个背景图像?

Related 相关文章

  1. 1

    如何在React.JS中使用``onclick''功能更改特定div的背景图像

  2. 2

    如何在Javascript中使用条件更改Div的背景图像

  3. 3

    如何使用ng-style设置div的背景图像

  4. 4

    如何使用动画更改div背景图像

  5. 5

    如何使用javascript更改div的背景图像?

  6. 6

    如何使用CSS在DIV标签上添加背景图像

  7. 7

    如何使用javascript更改div的背景图像?

  8. 8

    如何使用动画更改div背景图像

  9. 9

    CSS:如何在div中模糊背景图像?

  10. 10

    如何在TImage上显示Div背景图像

  11. 11

    CSS:如何在div中模糊背景图像?

  12. 12

    如何在div元素上转换多个背景图像?

  13. 13

    如何在TImage上显示Div背景图像

  14. 14

    如何使div背景图像响应

  15. 15

    如何使div背景图像响应?

  16. 16

    如何在没有背景图像的情况下使用CSS 3模糊div下的div?

  17. 17

    如何在没有来自父div的背景图像的情况下让子div

  18. 18

    如何在包含背景图像的空div上覆盖div?

  19. 19

    如何在媒体查询中使用 API 返回的图像作为背景图像?

  20. 20

    如何在媒体查询中使用 API 返回的图像作为背景图像?

  21. 21

    如何在具有背景尺寸的div上缩放背景图像

  22. 22

    使用角度,如何更改div的背景图像以匹配用户对象的profileImage属性?

  23. 23

    如何使用CSS为div的背景图像设置不透明度或降低亮度

  24. 24

    如何使用可缩放的全尺寸背景图像制作3个div

  25. 25

    如何使用背景图像后面的引导程序将 <div> 放在中心上方?

  26. 26

    如何仅使用 CSS 在单独的 div 中切换背景图像

  27. 27

    如何在旋转图像CSS或Javascript时使背景图像填充空白(在div上)?

  28. 28

    使用背景图像保持 div 的纵横比

  29. 29

    如何检查div包含哪个背景图像?

热门标签

归档