gpt4 book ai didi

html - 阻止调整图像大小

转载 作者:太空宇宙 更新时间:2023-11-04 00:35:42 26 4
gpt4 key购买 nike

我不明白为什么,但是背景图像的大小调整被某些东西阻止了。

我有以下代码将图像添加到 div 的背景,我愿意显示整个图像,而不仅仅是它的中心。一些图像是如何放大的,我想将其更改为完整 ImageView 。

#section1{
background-image: url(http://freevectorsite.com/wp-content/uploads/2013/09/Abstract-Hi-Tech-Background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-size: 100% 1000px;
transform: translateZ(-1px) scale(2);
z-index:-1;
}

HTML:

<div id="section1" class="section">
<div class="text">
<p>My Work</p>
</div>
</div>

CodePen

如何使用 background-size 来查看整个图像而不是其中的一部分?

最佳答案

根据您提供的代码,div 的高度不是手动设置的,因此它的高度是自动的,等于其内容的大小(高度)。 div 仅包含子 div 和段落,因此它的大小很小。

所以你可以试试这个:

<div id="section1" class="section">
<div class="text">
<p>My Work</p>
</div>
</div>

#section1{
background-image: url(http://freevectorsite.com/wp-content/uploads/2013/09/Abstract-Hi-Tech-Background.jpg);
background-size: cover;
background-repeat: no-repeat;
transform: translateZ(-1px) scale(2);
height: 100vh; /*This equals to whole viewport height, but you can try any size you want*/
z-index:-1;
}

关于html - 阻止调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59481371/

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