为什么这个css不响应外部图像源

所以我正在尝试练习css，但由于某种原因，这段代码不会响应我放入的图像链接。我尝试了来自不同来源的多个链接，但都不起作用。有人能告诉我我做错了什么吗？该图像用于css代码下半部分的showcase区域。

我试过背景图像：url(….(和背景：url(...(

html

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/f52626a245.js" crossorigin="anonymous"></script>
<link href='https://fonts.googleapis.com/css?family=Archivo Narrow' rel='stylesheet'>
<link rel="stylesheet" href="styles.css">
<title></title>
</head>
<body>
<!---Navbar-->
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>

<div style="padding-left:16px">
<h2>Website</h2>
<p>Resize the browser window to see how it works.</p>
</div>

<!---Showcase-->
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">I am John Doe</h1>
<p>And I'm a Photographer</p>
<button>Hire me</button>
</div>
</div>



</body>
<script src="main.js"></script>
</html>

css


body {
margin: 0;
font-family: 'Archivo Narrow'; font-size: 18px;;
}

.topnav {
overflow: hidden;
background-color: #034f84;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
background-color: #ddd;
color:#034f84;
}

.topnav a.active {
background-color: #04AA6D;
color: white;
}

.topnav .icon {
display: none;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}

/* showcase */
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) ;
background:url(http://placekitten.com/200/300) no-repeat 0 0;

height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}

.hero-text button:hover {
background-color: #555;
color: white;
}

javascript

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

您已经将hero-image的高度定义为50%。将其更改为某个已定义的值，例如height: 500px;。因为百分比高度总是采用父对象的高度(如果定义(。由于父元素body没有定义的值，因此子元素的高度(以百分比表示(将不起作用。

选项1:将.hero-text的position更改为relative

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

body {
margin: 0;
font-family: 'Archivo Narrow';
font-size: 18px;
;
}
.topnav {
overflow: hidden;
background-color: #034f84;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: #034f84;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}

/* showcase */
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
background-image: url(https://cdn-media.theathletic.com/cdn-cgi/image/fit=cover,width=700,height=466/A3gFprxfg737_evEgJW15MGsl_1440x.960.jpg);
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.hero-text button:hover {
background-color: #555;
color: white;
}

<!---Navbar-->
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Website</h2>
<p>Resize the browser window to see how it works.</p>
</div>

<!---Showcase-->
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">I am John Doe</h1>
<p>And I'm a Photographer</p>
<button>Hire me</button>
</div>
</div>

选项2:将.hero-image的高度更改为预先定义的值

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

body {
margin: 0;
font-family: 'Archivo Narrow';
font-size: 18px;
;
}
.topnav {
overflow: hidden;
background-color: #034f84;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: #034f84;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}

/* showcase */
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
background: url(http://placekitten.com/200/300) no-repeat 0 0;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.hero-text button:hover {
background-color: #555;
color: white;
}

<!---Navbar-->
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Website</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<!---Showcase-->
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">I am John Doe</h1>
<p>And I'm a Photographer</p>
<button>Hire me</button>
</div>
</div>

很简单，background-image代表背景的图像。没有样式。只需将background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));更改为background-image: url("http://placekitten.com/200/300);

并对其进行样式设置：background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));

这应该有效

相关内容

最新更新

热门标签：