gpt4 book ai didi

html - 使用 Bulma.io 的整页图像背景?

转载 作者:太空狗 更新时间:2023-10-29 15:40:04 25 4
gpt4 key购买 nike

我正在使用 Bulma.io CSS library 设计一个网站

并成功制作了整页彩色背景,但我想使用图像,我可以在他们的文档中看到您可以指定图像的 px 大小,但我希望图像是流畅的,调整大小它是用户浏览器,在不引起任何问题的情况下执行此操作的最佳方法是什么?

最佳答案

阅读此 http://bulma.io/documentation/layout/hero/或尝试自定义

//In HTML Section you need to create a class name Ex. bg-imge
<div class="bg-img">

</div>

//in custom CSS you need to add
.bg-img {
background-image: url(demo.jpg) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;

}

// [.img-responsive is custom class in bootstrap]
// You can use custom class like
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
//which you can put in your html Img part
<img class="img-responsive" src="demo.jpg"/>

//in bulma.io [i'm not sure] but For single image you can use this.
//It will auto responsive.

<div class="tile ">
<figure class="image">
<img src="demo.jpg">
</figure>
</div>

阅读http://bulma.io/documentation/elements/image/ 在这里你会找到 bulma.io img 响应部分

关于html - 使用 Bulma.io 的整页图像背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39427416/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com