繁体   English   中英

Bootstrap 中的背景图片

[英]Background image in Bootstrap

我正在努力了解 Bootstrap 背景图片。 当文件是本地文件时,任何人都可以帮助显示背景图像的正确语法。 具体来说,我的页面 html 中有两条替代线

<body class ="bg-image" style="background-image: 
url('https://mdbootstrap.com/img/Photos/Others/images/76.jpg');height:100vh;">
<body class ="bg-image" style="background-image: 
url('/wwwroot/Images/gymEquipment.jpg');height:100vh;">

第一个有效,第二个本地无效。 非常感谢任何更正。

谢谢,尼克

整页背景图片

我们可以轻松地使此背景图像覆盖整个可用空间并使其成为整页背景图像。

只需替换 height: 400px; 高度:100vh;

vh 代表视口高度。

高度:100vh; 表示可用高度的 100%。

<!-- Background image -->
<div
  class="bg-image"
  style="
    background-image: url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp');
    height: 100vh;
  "
></div>
<!-- Background image -->

注意:如果您想将图像拉伸到全部可用的高度和宽度,请记住使用具有足够高分辨率的图像。 但是,请注意不要过度。 高分辨率图像很重,会减慢您的网站速度。

更多信息https://mdbootstrap.com/docs/standard/content-styles/background-image/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM