css Flexbox不适用于图像的背景

yzuktlbb  于 2023-05-30  发布在  其他
关注(0)|答案(3)|浏览(114)

这是我的第一篇文章。我需要在CSS中水平和垂直地居中我的背景图像,但是无论我尝试什么方式,图像都顽固地保持在它的位置上。我已经读了30篇关于这个问题的文章,但似乎没有一篇对我有用。谢谢你的任何建议

.angryjalapeno {
    width: 500px;
    height: 300px;
    background-image: url(https://placehold.co/200x200);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
<div class="angryjalapeno"></div>

HTML版本在这里

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Background as color and image</title>
    <link rel="stylesheet" href="css/style.css">

        <div class="angryjalapeno">

        </div>
</head>
<body>
</body>
</html>
wixjitnu

wixjitnu1#

删除background-size: cover会将图像占位符放在div的中心。

.angryjalapeno {
    width: 500px;
    height: 300px;
    background-image: url(https://placehold.co/200x100);
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: cover; */
    display: flex;
    justify-content: center;
    align-items: center;
}
<div class="angryjalapeno">
</div>
dfddblmv

dfddblmv2#

如果图片大于300x500,则代码为true。但如果它小于这个大小,则需要删除background-size: cover;

fhity93d

fhity93d3#

我建议您将background-position属性更改为如下所示。

background-position: center center;

相关问题