英文:
why does setting an image background overrides bootstrap buttons' background color?
问题
为什么这个CSS覆盖了Bootstrap按钮的背景样式，使其透明，而不是默认的按钮颜色？
例如，如果我有一个按钮，并且在我的文档中有下面的样式，它将整个body的background-image设置为一张图片。我可以看到它覆盖了按钮的背景，并使其与图片的颜色相同。这是为什么会发生的，如何修复它？
英文:
Why does this CSS override bootstrap button background styling and makes it transparent rather than the default button of the color?
For example, if I have a button and I have the styling below in my document which sets the background-image of the whole body to an image. I can see that it overrides the background of the buttons as well and makes the same color as the image. is there a reason why does that happen and how to fix it?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
padding: 0;
margin: 0;
box-sizing: border-box;
background: url('assets/background.jpg') no-repeat center center fixed;
background-size: cover;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<button class="btn btn-warning m-4">A Button</button>
<!-- end snippet -->
答案1
得分: 1
问题在于使用*****选择器。该选择器用于选择文档中的所有元素（在您的情况下，*选择器选择 => html标签、body标签和button标签）
如果您希望给body设置背景图片，请改用**body选择器，而不是***选择器。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: url('https://images.unsplash.com/photo-1676269098733-4a94f912d838?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80') no-repeat center center fixed;
background-size: cover;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<button class="btn btn-warning m-4">A Button</button>
英文:
The issue here is using * selector, This selector is used to select all the elements in your document (In your case * selects => html tag, body tag, and button tag)
If u wish to give background image to body use body saelector instead of *
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: url('https://images.unsplash.com/photo-1676269098733-4a94f912d838?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80') no-repeat center center fixed;
background-size: cover;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<button class="btn btn-warning m-4">A Button</button>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论