我在 Codepen 上建立了这个致敬页面。我添加了 Bootsrap。然后我无法从 css 访问 body。你可以在这里查看我的代码。
body {
background-color: black;
}
.header {
font-size: 100px;
font-family: "Libre Barcode 39 Text";
text-align: center;
}
.mainPicture {
width: 95px;
}
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container-fluid">
<h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>
最佳答案
Bootstrap 风格覆盖了您的风格。使用 !important 覆盖 Bootstrap 样式。有关详细信息,请检查这些用法
html>body {
background-color: black;
}
.header {
font-size: 100px;
font-family: "Libre Barcode 39 Text";
text-align: center;
}
.mainPicture {
width: 95px;
}
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container-fluid">
<h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>
替代解决方案:-
使用 html > body
来增加特异性,这是一个很好的做法
html > body {
background-color: black;
}
.header {
font-size: 100px;
font-family: "Libre Barcode 39 Text";
text-align: center;
}
.mainPicture {
width: 95px;
}
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container-fluid">
<h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>
关于html - 我无法从 css 访问 body,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46377209/