英文:
Flexbox not working for image's background
问题
这是您要翻译的内容：
"这是我在这里的第一篇帖子。我需要在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;
}
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>
希望这对您有帮助。"
英文:
It's my first post here. I need to center my background image horizontally and vertically in CSS,however whatever way I try the image stubbornly remains on its place. I've read like 30 posts on the issue, but nothing seems to work for me. Thank you for any suggestions
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<div class="angryjalapeno"></div>
<!-- end snippet -->
HTML version here
<!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>
答案1
得分: 1
删除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>
英文:
Removing background-size: cover puts the image placeholder in the center of the div.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<div class="angryjalapeno">
</div>
<!-- end snippet -->
答案2
得分: 0
如果您的图片大小超过300x500，则您的代码为真。但如果小于此尺寸，则需要移除 background-size: cover;。
英文:
If your picture is bigger than 300x500, then your code true. But if it's smaller than this size you need to remove background-size: cover;
答案3
得分: -2
我建议您将您的 background-position 属性更改为类似以下内容的方式。
background-position: center center;
英文:
I recommend that you change your background-position property to something like this.
background-position: center center;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论